/**
 * Annual Report — Editorial Redesign
 *
 * Magazine-style layout: big typography, generous whitespace,
 * asymmetric rhythm, editorial accents.
 *
 * @package flavor23
 */

/* ==============================
   Page-scoped tokens
   ============================== */
.ar {
	--ar-navy: #1B2030;
	--ar-navy-soft: #2A2F42;
	--ar-cream: #F7F3EC;
	--ar-cream-deep: #EBE4D4;
	--ar-ink: #1A1A2E;
	--ar-ink-soft: #5B616F;
	--ar-gold: #DD9F33;
	--ar-gold-soft: rgba(221, 159, 51, 0.14);
	--ar-rule: rgba(26, 26, 46, 0.12);
	--ar-rule-light: rgba(255, 255, 255, 0.14);
	--ar-teal: #2FADC1;
	--ar-purple: #7E72AF;
	--ar-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	--ar-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--ar-measure: 640px;
}

/* Wrap the full page so tokens cascade to every section. */
body.page-annual-report #primary,
body.page-annual-report .site-main,
body.page-annual-report main {
	background: var(--ar-cream);
}

body.page-annual-report {
	background: var(--ar-cream);
}

/* ==============================
   Scroll progress rail
   ============================== */
.ar-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0%;
	background: var(--ar-gold);
	z-index: 2000;
	transition: width 0.1s linear;
	pointer-events: none;
}

/* ==============================
   Editorial typography primitives
   ============================== */
.ar-eyebrow {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ar-gold);
	margin: 0 0 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.ar-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--ar-gold);
	display: inline-block;
}

.ar-eyebrow--light {
	color: rgba(255, 255, 255, 0.7);
}

.ar-eyebrow--light::before {
	background: rgba(255, 255, 255, 0.4);
}

.ar-display {
	font-family: var(--ar-serif);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ar-ink);
	margin: 0;
}

.ar-display--xl {
	font-size: clamp(3rem, 7vw, 6rem);
}

.ar-display--lg {
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}

.ar-display--md {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	line-height: 1.12;
}

.ar-display--light {
	color: #fff;
}

.ar-italic {
	font-style: italic;
	font-family: var(--ar-serif);
}

.ar-lede {
	font-family: var(--ar-serif);
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.55;
	color: var(--ar-ink-soft);
	max-width: var(--ar-measure);
	margin: 1.5rem 0 0;
}

.ar-lede--light {
	color: rgba(255, 255, 255, 0.72);
}

.ar-rule {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--ar-gold);
	margin: 2.5rem 0;
	border: 0;
}

.ar-rule--light {
	background: var(--ar-rule-light);
}

.ar-rule--center {
	margin-left: auto;
	margin-right: auto;
}

/* ==============================
   Layout shell
   ============================== */
.ar-section {
	position: relative;
	padding: clamp(5rem, 10vw, 9rem) 1.5rem;
	overflow: hidden;
}

.ar-section--dark {
	background: var(--ar-navy);
	color: #fff;
}

.ar-section--cream {
	background: var(--ar-cream);
	color: var(--ar-ink);
}

.ar-section--paper {
	background: #fff;
	color: var(--ar-ink);
}

.ar-container {
	max-width: 1200px;
	margin: 0 auto;
}

.ar-container--narrow {
	max-width: 780px;
}

.ar-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
}

/* ==============================
   1. COVER  (desktop-first)
   ============================== */
.ar-cover {
	min-height: 100vh;
	padding: 9rem 3rem 4rem;
	background: var(--ar-navy);
	color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ar-cover::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 18% 12%, rgba(221, 159, 51, 0.08) 0%, transparent 55%),
		radial-gradient(ellipse at 82% 88%, rgba(93, 121, 146, 0.18) 0%, transparent 55%);
	pointer-events: none;
	z-index: 0;
}

.ar-cover__frame {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-rows: auto 1fr auto;
	flex: 1;
	width: 100%;
	gap: 4rem;
}

.ar-cover__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--ar-sans);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ar-cover__meta-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ar-cover__meta-line::before {
	content: '';
	width: 28px;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
}

.ar-cover__body {
	align-self: center;
	max-width: 1100px;
}

.ar-cover__tag {
	display: inline-block;
	font-family: var(--ar-sans);
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ar-gold);
	margin-bottom: 2.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(221, 159, 51, 0.4);
}

.ar-cover__title {
	font-family: var(--ar-serif);
	font-size: clamp(3rem, 6.5vw, 6rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 2.5rem;
}

.ar-cover__title em {
	font-style: italic;
	color: var(--ar-gold);
	font-weight: 400;
}

.ar-cover__sub {
	font-family: var(--ar-serif);
	font-size: clamp(1.15rem, 1.35vw, 1.45rem);
	font-style: italic;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	max-width: 560px;
	margin: 0;
}

.ar-cover__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ar-cover__year-block {
	font-family: var(--ar-serif);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ar-cover__year-big {
	font-size: clamp(2.25rem, 3vw, 3rem);
	line-height: 1;
	font-weight: 400;
	color: #fff;
	letter-spacing: -0.015em;
	display: inline-flex;
}

.ar-cover__year-label {
	display: inline-block;
	font-family: var(--ar-sans);
	font-size: 0.68rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	order: -1;
}

.ar-cover__scroll {
	appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--ar-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	transition: color 0.3s ease, gap 0.3s ease;
}

.ar-cover__scroll::after {
	content: '';
	width: 64px;
	height: 1px;
	background: currentColor;
	opacity: 0.65;
	transition: width 0.3s ease;
}

.ar-cover__scroll:hover {
	color: var(--ar-gold);
	gap: 1.4rem;
}

.ar-cover__scroll:hover::after {
	width: 80px;
}

@keyframes ar-scroll-pulse {
	0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
	50%      { transform: scaleY(1);   opacity: 0.9; }
}

/* ==============================
   2. LETTER
   ============================== */
.ar-letter {
	padding-top: clamp(6rem, 10vw, 9rem);
	padding-bottom: clamp(6rem, 10vw, 9rem);
}

.ar-letter__head {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--ar-rule);
}

.ar-letter__meta {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	padding-top: 0.75rem;
}

.ar-letter__meta-line {
	display: block;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ar-rule);
}

.ar-letter__meta-line:last-child {
	border-bottom: 0;
}

.ar-letter__meta-line strong {
	display: block;
	color: var(--ar-ink);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	margin-bottom: 0.25rem;
	opacity: 0.55;
}

.ar-letter__heading {
	font-family: var(--ar-serif);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ar-ink);
	margin: 0;
}

.ar-letter__body {
	font-family: var(--ar-serif);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--ar-ink);
	/* Stretch to full container width (same as the divider under the head) */
}

.ar-letter__body p {
	margin: 0 0 1.5rem;
}

.ar-letter__body p:first-of-type::first-letter {
	font-family: var(--ar-serif);
	float: left;
	font-size: 4.75rem;
	line-height: 0.9;
	margin: 0.35rem 0.65rem -0.35rem 0;
	color: var(--ar-gold);
	font-weight: 400;
}

.ar-letter__sign {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ar-rule);
	font-family: var(--ar-serif);
}

.ar-letter__sign-close {
	font-style: italic;
	color: var(--ar-ink-soft);
	margin: 0 0 1rem;
	line-height: 1.55;
}

.ar-letter__sign-names {
	font-family: var(--ar-serif);
	font-size: 1.5rem;
	font-weight: 400;
	margin: 0;
	color: var(--ar-ink);
	letter-spacing: -0.01em;
}

.ar-letter__sign-role {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	margin: 0.5rem 0 0;
}

/* ==============================
   3. PULL QUOTE (dark)
   ============================== */
.ar-pull {
	padding: clamp(5rem, 8vw, 7rem) 1.5rem;
	background: var(--ar-navy);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.ar-pull::before,
.ar-pull::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 1px;
	background: var(--ar-rule-light);
}

.ar-pull::before { top: 0; }
.ar-pull::after { bottom: 0; }

.ar-pull__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.ar-pull__mark {
	font-family: var(--ar-serif);
	font-size: 7rem;
	line-height: 1;
	color: var(--ar-gold);
	opacity: 0.55;
	display: block;
	margin: 0 0 1rem;
	font-weight: 400;
	font-style: italic;
}

.ar-pull__text {
	font-family: var(--ar-serif);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 2rem;
	color: #fff;
}

.ar-pull__attr {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

.ar-pull__attr strong {
	color: var(--ar-gold);
	font-weight: 600;
}

/* ==============================
   4. IMPACT NUMBERS
   ============================== */
.ar-impact {
	padding-top: clamp(5rem, 8vw, 8rem);
	padding-bottom: clamp(5rem, 8vw, 8rem);
}

.ar-impact__head {
	max-width: var(--ar-measure);
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ar-stats {
	display: grid;
	/* Cell 1 is wider than the rest to fit "~$100K" comfortably. The other
	   three cells only hold 1-3 character numbers so 1fr is plenty.
	   minmax(0, ...) prevents content from resizing the columns. */
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	border-top: 1px solid var(--ar-rule);
	border-bottom: 1px solid var(--ar-rule);
}

.ar-stat {
	padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 2rem);
	border-right: 1px solid var(--ar-rule);
	position: relative;
}

.ar-stat:last-child {
	border-right: 0;
}

.ar-stat__num {
	font-family: var(--ar-serif);
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ar-gold);
	margin: 0;
	display: block;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.ar-stat__num em {
	font-style: italic;
	font-weight: 400;
}

/* Prefix / suffix inherit the gold color from .ar-stat__num.
   No special styling — the whole number renders as one unified gold string. */
.ar-stat__prefix,
.ar-money__prefix,
.ar-stat__suffix,
.ar-money__suffix {
	color: inherit;
}

.ar-stat__label {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	margin: 1.25rem 0 0;
	line-height: 1.5;
}

.ar-stat__index {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--ar-ink-soft);
	opacity: 0.5;
}

/* ==============================
   5 & 6. PARTNERS (editorial roster)
   ============================== */
.ar-partners {
	padding-top: clamp(5rem, 8vw, 8rem);
	padding-bottom: clamp(5rem, 8vw, 8rem);
}

.ar-partners__head {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
	padding-bottom: clamp(2.5rem, 4vw, 4rem);
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
	border-bottom: 1px solid var(--ar-rule);
}

.ar-partners__intro .ar-eyebrow {
	color: var(--ar-teal);
}

.ar-partners__intro .ar-eyebrow::before {
	background: var(--ar-teal);
}

.ar-partners--sab .ar-partners__intro .ar-eyebrow {
	color: var(--ar-purple);
}

.ar-partners--sab .ar-partners__intro .ar-eyebrow::before {
	background: var(--ar-purple);
}

.ar-partners__group {
	margin: 0 0 clamp(3rem, 5vw, 4.5rem);
}

.ar-partners__group:last-child {
	margin-bottom: 0;
}

.ar-partners__group-label {
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--ar-rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ar-partners__group-label-count {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ar-ink-soft);
	opacity: 0.65;
}

.ar-roster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.ar-roster__row {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--ar-rule);
	transition: background 0.25s ease;
}

.ar-roster__row:first-child,
.ar-roster__row:nth-child(2) {
	border-top: 0;
}

.ar-roster__row:hover {
	background: rgba(26, 26, 46, 0.02);
}

/* staggered column borders so rows feel like two columns of a newspaper */
.ar-roster__row:nth-child(odd) {
	padding-right: clamp(1rem, 3vw, 2.5rem);
}

.ar-roster__row:nth-child(even) {
	padding-left: clamp(1rem, 3vw, 2.5rem);
	border-left: 1px solid var(--ar-rule);
}

.ar-roster__idx {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.875rem;
	color: var(--ar-ink-soft);
	opacity: 0.55;
}

.ar-roster__body {
	min-width: 0;
}

.ar-roster__name {
	font-family: var(--ar-serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--ar-ink);
	margin: 0 0 0.2rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ar-roster__church {
	font-family: var(--ar-sans);
	font-size: 0.875rem;
	color: var(--ar-ink-soft);
	margin: 0;
}

.ar-roster__church::after {
	content: ' · ';
	color: var(--ar-rule);
	margin: 0 0.15rem;
}

.ar-roster__loc {
	font-family: var(--ar-sans);
	font-size: 0.875rem;
	color: var(--ar-ink-soft);
}

.ar-roster__badge {
	font-family: var(--ar-sans);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	opacity: 0.7;
	white-space: nowrap;
}

.ar-partners--cp .ar-roster__badge--new {
	color: var(--ar-teal);
	opacity: 1;
}

.ar-partners--sab .ar-roster__badge--new {
	color: var(--ar-purple);
	opacity: 1;
}

/* Partner testimonial — editorial blockquote */
.ar-voices {
	margin-top: clamp(4rem, 7vw, 6rem);
	padding-top: clamp(3rem, 5vw, 4rem);
	border-top: 1px solid var(--ar-rule);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
}

.ar-voice {
	position: relative;
	margin: 0;
}

.ar-voice__mark {
	font-family: var(--ar-serif);
	font-size: 4rem;
	line-height: 0.9;
	color: var(--ar-gold);
	margin: 0 0 0.5rem;
	opacity: 0.6;
	font-weight: 400;
	font-style: italic;
	display: block;
}

.ar-voice__text {
	font-family: var(--ar-serif);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ar-ink);
	margin: 0 0 1.5rem;
}

.ar-voice__attr {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
}

.ar-voice__attr strong {
	display: block;
	color: var(--ar-ink);
	font-weight: 600;
	margin-bottom: 0.2rem;
	font-size: 0.85rem;
}

/* ==============================
   7. VALUES PULL QUOTE
   — reuses .ar-pull
   ============================== */

/* ==============================
   8. FINANCIALS — editorial bar chart
   ============================== */
.ar-financials {
	padding-top: clamp(5rem, 8vw, 8rem);
	padding-bottom: clamp(5rem, 8vw, 8rem);
}

.ar-financials__head {
	max-width: 1000px;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* Desktop-only line break — hide on mobile so the two sentences flow together. */
.ar-dbr {
	display: inline;
}

@media (max-width: 960px) {
	.ar-dbr {
		display: none;
	}
}

.ar-financials__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}

.ar-bars {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.ar-bar {
	position: relative;
}

.ar-bar__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.6rem;
}

.ar-bar__label {
	font-family: var(--ar-sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ar-ink);
	letter-spacing: 0;
	text-transform: none;
}

.ar-bar__value {
	font-family: var(--ar-serif);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--ar-ink);
	letter-spacing: -0.01em;
}

.ar-bar__track {
	height: 6px;
	background: var(--ar-rule);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.ar-bar__fill {
	height: 100%;
	width: 0;
	background: var(--ar-navy);
	border-radius: 999px;
	transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-bar.is-visible .ar-bar__fill {
	width: var(--ar-bar-pct, 0%);
}

.ar-bar--grants .ar-bar__fill { background: var(--ar-navy); }
.ar-bar--personnel .ar-bar__fill { background: #5D7992; }
.ar-bar--care .ar-bar__fill { background: var(--ar-gold); }
.ar-bar--discovery .ar-bar__fill { background: #4A5F72; }
.ar-bar--practical .ar-bar__fill { background: var(--ar-cream-deep); }

.ar-bar__note {
	font-family: var(--ar-serif);
	font-size: 0.875rem;
	font-style: italic;
	color: var(--ar-ink-soft);
	margin: 0.6rem 0 0;
	opacity: 0.85;
}

.ar-money {
	background: var(--ar-navy);
	color: #fff;
	padding: clamp(2.5rem, 4vw, 3.5rem);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

.ar-money::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ar-gold);
}

.ar-money__label {
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 1.25rem;
}

.ar-money__num {
	font-family: var(--ar-serif);
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ar-gold);
	margin: 0 0 0.5rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.ar-money__num em {
	font-style: italic;
	color: var(--ar-gold);
}

.ar-money__sub {
	font-family: var(--ar-sans);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 2rem;
}

.ar-money__body {
	font-family: var(--ar-serif);
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ==============================
   9. VISION — four convictions
   ============================== */
.ar-vision {
	padding-top: clamp(5rem, 8vw, 8rem);
	padding-bottom: clamp(5rem, 8vw, 8rem);
}

.ar-vision__head {
	max-width: var(--ar-measure);
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ar-convictions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--ar-rule);
	border-left: 1px solid var(--ar-rule);
}

.ar-conviction {
	padding: clamp(2.5rem, 4vw, 3.5rem);
	border-right: 1px solid var(--ar-rule);
	border-bottom: 1px solid var(--ar-rule);
	background: #fff;
	position: relative;
	transition: background 0.3s ease;
}

.ar-conviction:hover {
	background: var(--ar-cream);
}

.ar-conviction__num {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.9rem;
	color: var(--ar-gold);
	margin: 0 0 1.5rem;
	display: block;
}

.ar-conviction__title {
	font-family: var(--ar-serif);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ar-ink);
	margin: 0 0 1rem;
}

.ar-conviction__title em {
	font-style: italic;
	color: var(--ar-gold);
}

.ar-conviction__body {
	font-family: var(--ar-serif);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ar-ink-soft);
	margin: 0;
}

/* ==============================
   10. CTA
   ============================== */
.ar-cta {
	padding-top: clamp(5rem, 9vw, 9rem);
	padding-bottom: clamp(5rem, 9vw, 9rem);
	background: var(--ar-navy);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.ar-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(221, 159, 51, 0.1) 0%, transparent 55%),
		radial-gradient(ellipse at 20% 80%, rgba(93, 121, 146, 0.15) 0%, transparent 55%);
	pointer-events: none;
}

.ar-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

.ar-cta__head {
	max-width: 780px;
	margin-bottom: clamp(3rem, 6vw, 5rem);
	padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
	padding-right: clamp(1.5rem, 2.5vw, 2.5rem);
}

.ar-cta__title {
	font-family: var(--ar-serif);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
}

.ar-cta__title em {
	font-style: italic;
	color: var(--ar-gold);
}

.ar-cta__sub {
	font-family: var(--ar-serif);
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	font-style: italic;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	margin: 1.75rem 0 0;
	max-width: 580px;
}

.ar-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--ar-rule-light);
}

.ar-action {
	padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
	border-right: 1px solid var(--ar-rule-light);
	text-decoration: none;
	color: inherit;
	display: block;
	position: relative;
	transition: background 0.3s ease;
}

.ar-action:last-child {
	border-right: 0;
}

.ar-action:hover {
	background: rgba(255, 255, 255, 0.03);
}

.ar-action__num {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.9rem;
	color: var(--ar-gold);
	margin: 0 0 1.25rem;
	display: block;
}

.ar-action__title {
	font-family: var(--ar-serif);
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
	letter-spacing: -0.015em;
}

.ar-action__body {
	font-family: var(--ar-serif);
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 1.5rem;
}

.ar-action__arrow {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ar-gold);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	transition: gap 0.3s ease;
}

.ar-action:hover .ar-action__arrow {
	gap: 1rem;
}

.ar-action__arrow::after {
	content: '→';
	font-size: 1rem;
	letter-spacing: 0;
}

/* ==============================
   11. CLOSING
   ============================== */
.ar-closing {
	padding: clamp(5rem, 9vw, 8rem) 1.5rem;
	background: var(--ar-cream);
	text-align: center;
}

.ar-closing__inner {
	max-width: 800px;
	margin: 0 auto;
}

.ar-closing__rule {
	width: 1px;
	height: 64px;
	background: var(--ar-gold);
	margin: 0 auto 2.5rem;
}

.ar-closing__verse {
	font-family: var(--ar-serif);
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	font-style: italic;
	line-height: 1.65;
	color: var(--ar-ink);
	margin: 0 0 1.5rem;
}

.ar-closing__ref {
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	margin: 0 0 3rem;
}

.ar-closing__monogram {
	font-family: var(--ar-serif);
	font-size: 2rem;
	color: var(--ar-ink);
	opacity: 0.3;
	margin: 0 auto 1.5rem;
	display: block;
}

.ar-closing__org {
	font-family: var(--ar-serif);
	font-size: 1.15rem;
	color: var(--ar-ink);
	margin: 0 0 0.3rem;
	letter-spacing: -0.01em;
}

.ar-closing__tag {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--ar-ink-soft);
	margin: 0;
}

.ar-closing__links {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

.ar-closing__links a {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ar-ink);
	text-decoration: none;
	transition: color 0.3s ease;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid transparent;
}

.ar-closing__links a:hover {
	color: var(--ar-gold);
	border-bottom-color: var(--ar-gold);
}

.ar-closing__copy {
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	opacity: 0.6;
	margin: 0;
}

/* ==============================
   Scroll reveal
   ============================== */
.ar-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ar-reveal-delay-1 { transition-delay: 0.1s; }
.ar-reveal-delay-2 { transition-delay: 0.2s; }
.ar-reveal-delay-3 { transition-delay: 0.3s; }

/* ==============================
   Responsive
   ============================== */
@media (max-width: 960px) {
	.ar-letter__head,
	.ar-partners__head,
	.ar-financials__grid {
		grid-template-columns: 1fr;
	}

	.ar-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-left: 0;
	}

	.ar-stat:nth-child(2) {
		border-right: 0;
	}

	.ar-stat:nth-child(1),
	.ar-stat:nth-child(2) {
		border-bottom: 1px solid var(--ar-rule);
	}

	.ar-roster {
		grid-template-columns: 1fr;
	}

	.ar-roster__row:nth-child(odd),
	.ar-roster__row:nth-child(even) {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
	}

	.ar-voices {
		grid-template-columns: 1fr;
	}

	.ar-actions {
		grid-template-columns: 1fr;
	}

	.ar-action {
		border-right: 0;
		border-bottom: 1px solid var(--ar-rule-light);
	}

	.ar-action:last-child {
		border-bottom: 0;
	}

	.ar-convictions {
		grid-template-columns: 1fr;
	}

	.ar-cover__foot {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.ar-cover__scroll {
		align-self: flex-start;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.ar-cover {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.ar-stats {
		grid-template-columns: 1fr;
		border-top: 0;
	}

	.ar-stat {
		border-right: 0;
		border-bottom: 1px solid var(--ar-rule);
	}

	.ar-stat:first-child {
		border-top: 1px solid var(--ar-rule);
	}

	.ar-cover__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.ar-letter__body p:first-of-type::first-letter {
		font-size: 3.75rem;
	}
}

/* ==================================================================
   INTERACTIVE LAYER
   ================================================================== */

/* ==============================
   Chapter rail (side navigation)
   ============================== */
.ar-chapters {
	position: fixed;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.ar-chapters.is-ready {
	opacity: 1;
	pointer-events: auto;
}

.ar-chapter {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	color: var(--ar-ink-soft);
	font-family: var(--ar-sans);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
	cursor: pointer;
}

.ar-chapter__label {
	opacity: 0.15;
	transition: opacity 0.3s ease;
	white-space: nowrap;
	line-height: 1;
}

.ar-chapter:hover .ar-chapter__label,
.ar-chapter.is-active .ar-chapter__label {
	opacity: 1;
}

.ar-chapter__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--ar-ink-soft);
	background: transparent;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.ar-chapter.is-active {
	color: var(--ar-gold);
}

.ar-chapter.is-active .ar-chapter__dot {
	background: var(--ar-gold);
	border-color: var(--ar-gold);
	transform: scale(1.4);
}

.ar-chapter.is-over-dark {
	color: rgba(255, 255, 255, 0.55);
}

.ar-chapter.is-over-dark .ar-chapter__dot {
	border-color: rgba(255, 255, 255, 0.5);
}

.ar-chapter.is-over-dark.is-active {
	color: var(--ar-gold);
}

.ar-chapter.is-over-dark.is-active .ar-chapter__dot {
	background: var(--ar-gold);
	border-color: var(--ar-gold);
}

/* ==============================
   Cover — animated entrance
   ============================== */
.ar-cover__title-line {
	display: block;
	overflow: hidden;
	/* Extend the clip box down by ~0.2em so descenders on letters like
	   g, p, y aren't chopped off. Negative margin cancels the extra
	   vertical space so inter-line spacing stays the same. */
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
}

.ar-cover__title-inner {
	display: inline-block;
	transform: translateY(100%);
	opacity: 0;
	animation: ar-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ar-cover__title-line:nth-child(1) .ar-cover__title-inner { animation-delay: 0.3s; }
.ar-cover__title-line:nth-child(2) .ar-cover__title-inner { animation-delay: 0.45s; }
.ar-cover__title-line:nth-child(3) .ar-cover__title-inner { animation-delay: 0.6s; }

.ar-cover__sub,
.ar-cover__tag,
.ar-cover__meta,
.ar-cover__foot {
	opacity: 0;
	animation: ar-fade 1s ease 0.9s forwards;
}

.ar-cover__year-big {
	display: inline-flex;
	overflow: hidden;
}

.ar-cover__year-char {
	display: inline-block;
	transform: translateY(110%);
	animation: ar-rise-smooth 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ar-cover__year-char:nth-child(1) { animation-delay: 1.0s; }
.ar-cover__year-char:nth-child(2) { animation-delay: 1.08s; }
.ar-cover__year-char:nth-child(3) { animation-delay: 1.16s; }
.ar-cover__year-char:nth-child(4) { animation-delay: 1.24s; }
.ar-cover__year-char:nth-child(5) { animation-delay: 1.32s; }
.ar-cover__year-char:nth-child(6) { animation-delay: 1.40s; }
.ar-cover__year-char:nth-child(7) { animation-delay: 1.48s; }
.ar-cover__year-char:nth-child(8) { animation-delay: 1.56s; }
.ar-cover__year-char:nth-child(9) { animation-delay: 1.64s; }

@keyframes ar-rise {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes ar-rise-smooth {
	to {
		transform: translateY(0);
	}
}

@keyframes ar-fade {
	to { opacity: 1; }
}

/* Floating particles in cover */
.ar-cover__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.ar-particle {
	position: absolute;
	width: 3px;
	height: 3px;
	background: var(--ar-gold);
	border-radius: 50%;
	opacity: 0;
	animation: ar-particle-float linear infinite;
}

@keyframes ar-particle-float {
	0% { transform: translateY(110vh) scale(0); opacity: 0; }
	10% { opacity: 0.8; }
	50% { opacity: 0.8; }
	90% { opacity: 0; }
	100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ==============================
   Letter keyword hover (words are always visible)
   ============================== */
.ar-word {
	display: inline-block;
	transition: color 0.25s ease, transform 0.25s ease;
}

.ar-word.ar-keyword {
	cursor: default;
	position: relative;
}

.ar-word.ar-keyword::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 2px;
	width: 0;
	background: var(--ar-gold);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-word.ar-keyword:hover {
	color: var(--ar-gold);
	transform: translateY(-2px);
}

.ar-word.ar-keyword:hover::after {
	width: 100%;
}

/* ==============================
   Counter numbers
   ============================== */
.ar-counter {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	/* No min-width / no text-align — the counter sits flush against the
	   prefix so "~$" and "100" read as a single unit with no gap. */
}

/* ==============================
   Interactive dot map
   The base SVG is ~2000 tiny circles on a 5073.92 × 3074.63 viewBox.
   Every dot starts muted. JS finds the dot nearest to each partner's
   (x,y) coord and promotes it: colored fill, scaled up, animated ring.
   ============================== */
.ar-dotmap {
	position: relative;
	width: 100%;
	margin: clamp(3rem, 5vw, 4rem) 0 0;
}

.ar-dotmap__svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Base dots — every path in the map. */
.ar-dotmap__svg path {
	fill: rgba(26, 26, 46, 0.12);
	transition: fill 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	transform-box: fill-box;
	transform-origin: center;
}

/* Promoted partner dots. */
.ar-dotmap__svg path.is-partner {
	fill: var(--ar-teal);
	transform: scale(1.6);
	cursor: pointer;
}

.ar-dotmap__svg path.is-partner--sab {
	fill: var(--ar-purple);
}

.ar-dotmap__svg path.is-partner:hover,
.ar-dotmap__svg path.is-partner.is-active {
	transform: scale(2.2);
}

/* Pulsing rings — dynamically inserted as <circle> elements by JS.
   transform-origin is set inline by JS in viewBox coords so the pulse
   radiates from each dot's actual geometric center. */
.ar-dotmap__ring {
	fill: none;
	stroke: var(--ar-teal);
	stroke-width: 4;
	opacity: 0;
	animation: ar-dot-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

.ar-dotmap__ring--sab {
	stroke: var(--ar-purple);
}

@keyframes ar-dot-pulse {
	0%   { transform: scale(1);   opacity: 0.8; }
	100% { transform: scale(6);   opacity: 0; }
}

/* Invisible hover hit-zones — placed over partner dots by JS for easier mouse targeting. */
.ar-dotmap__hit {
	fill: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.ar-map__tooltip {
	position: absolute;
	background: var(--ar-navy);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 12px));
	transition: opacity 0.2s ease;
	z-index: 2;
	min-width: 200px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ar-map__tooltip.is-visible {
	opacity: 1;
}

.ar-map__tooltip::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -5px;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--ar-navy);
}

.ar-map__tooltip-name {
	font-family: var(--ar-serif);
	font-size: 0.95rem;
	font-weight: 500;
	margin: 0 0 0.15rem;
	color: #fff;
}

.ar-map__tooltip-church {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

.ar-map__tooltip-loc {
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-gold);
	margin: 0.35rem 0 0;
}

.ar-map__legend {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	gap: 1rem;
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	background: rgba(247, 243, 236, 0.92);
	padding: 0.6rem 0.9rem;
	border-radius: 4px;
}

.ar-map__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ar-map__legend-item::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ar-teal);
}

.ar-map__legend-item--sab::before {
	background: var(--ar-purple);
}

/* ==============================
   Horizontal scroll partner cards
   ============================== */
.ar-scroller {
	position: relative;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.ar-scroller__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 1rem 1.5rem 2rem;
	margin: 0 -1.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--ar-rule) transparent;
}

.ar-scroller__track::-webkit-scrollbar {
	height: 4px;
}

.ar-scroller__track::-webkit-scrollbar-thumb {
	background: var(--ar-rule);
	border-radius: 2px;
}

.ar-scroller__track::-webkit-scrollbar-track {
	background: transparent;
}

.ar-pcard {
	flex: 0 0 330px;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--ar-rule);
	padding: 2rem;
	border-radius: 4px;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
}

.ar-pcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(26, 26, 46, 0.08);
	border-color: transparent;
}

.ar-pcard__idx {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.8rem;
	color: var(--ar-ink);
	background: rgba(255, 255, 255, 0.92);
	padding: 0.2rem 0.55rem;
	border-radius: 2px;
	letter-spacing: 0.02em;
}

/* Photo header — full-bleed, extends past card padding to the rounded edges. */
.ar-pcard__media {
	margin: -2rem -2rem 1.5rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(47, 173, 193, 0.1);
	color: var(--ar-teal);
	border-radius: 4px 4px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.ar-partners--sab .ar-pcard__media {
	background: rgba(126, 114, 175, 0.1);
	color: var(--ar-purple);
}

.ar-pcard__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-partner photo crop overrides — use when the default "center top" crop
   doesn't land the subject well (e.g. family sits low in a wide photo). */
.ar-pcard[data-partner="richmond-howard"] .ar-pcard__photo {
	object-position: center center;
}

.ar-pcard:hover .ar-pcard__photo {
	transform: scale(1.04);
}

.ar-pcard__initials {
	font-family: var(--ar-serif);
	font-weight: 500;
	font-size: 3rem;
	letter-spacing: -0.02em;
	opacity: 0.7;
	line-height: 1;
}

/* Program indicator — teal for church planting, purple for sabbatical. */
.ar-pcard__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ar-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.ar-partners--sab .ar-pcard__badge {
	background: var(--ar-purple);
}

.ar-pcard__badge svg {
	width: 16px;
	height: 16px;
}

.ar-pcard__name {
	font-family: var(--ar-serif);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--ar-ink);
	margin: 0 0 0.25rem;
	letter-spacing: -0.01em;
}

.ar-pcard__church {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--ar-ink-soft);
	margin: 0 0 1rem;
}

.ar-pcard__loc {
	font-family: var(--ar-sans);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--ar-ink-soft);
	padding-top: 1rem;
	border-top: 1px solid var(--ar-rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}

.ar-pcard__year {
	font-family: var(--ar-serif);
	font-style: italic;
	color: var(--ar-gold);
}

.ar-scroller__hint {
	font-family: var(--ar-sans);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ar-ink-soft);
	margin: 0.5rem 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.6;
}

.ar-scroller__hint::after {
	content: '→';
	display: inline-block;
	animation: ar-nudge 1.6s ease-in-out infinite;
}

@keyframes ar-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}

/* ==============================
   Sticky vision section
   ============================== */
/* .ar-section sets overflow:hidden (for partner scrollers). That breaks
   position:sticky on descendants, so we override it here. */
.ar-section.ar-vision-sticky {
	overflow: visible;
	position: relative;
}

.ar-vision-sticky__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}

/* Sticky left column: full viewport height, top-anchored flow.
   - Top padding accounts for the 100px.
   - 50px gap between header and the stacked display words.
   - Content flows naturally downward from there. */
.ar-vision-sticky__left {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: start;
	padding-top: 100px;
	gap: 50px;
}

.ar-vision-sticky__left .ar-vision__head {
	margin-bottom: 0;
	max-width: none;
}

.ar-vision-sticky__display {
	font-family: var(--ar-serif);
	font-size: clamp(3rem, 6vw, 5.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--ar-ink);
	margin: 0;
	font-weight: 400;
}

.ar-vision-sticky__display em {
	font-style: italic;
	color: var(--ar-gold);
}

.ar-vision-sticky__display-word {
	display: block;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.ar-vision-sticky__display-word.is-dim {
	opacity: 0.15;
	transform: translateX(-8px);
}

.ar-vision-sticky__panels {
	display: flex;
	flex-direction: column;
	gap: 200px;
	/* Panel 1 starts ~500px from the top so its center lands aligned with
	   the stacked display block on the left (which sits ~580-600px down
	   after the 180px padding + header + 50px gap). */
	padding-top: 500px;
	padding-bottom: 300px;
}

.ar-vision-panel {
	display: flex;
	flex-direction: column;
	/* Panels are content-sized (no min-height) so the 200px gap is the
	   actual visible distance between each panel's content. */
	opacity: 1;
	will-change: opacity;
}

.ar-vision-panel__num {
	font-family: var(--ar-serif);
	font-style: italic;
	font-size: 0.9rem;
	color: var(--ar-gold);
	margin: 0 0 1rem;
}

.ar-vision-panel__title {
	font-family: var(--ar-serif);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--ar-ink);
	margin: 0 0 1.25rem;
	letter-spacing: -0.015em;
}

.ar-vision-panel__body {
	font-family: var(--ar-serif);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ar-ink-soft);
	margin: 0;
	max-width: var(--ar-measure);
}

/* ==============================
   Magnetic CTA cards
   ============================== */
.ar-action {
	transform-style: preserve-3d;
	will-change: transform;
}

.ar-action__content {
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-action:hover .ar-action__content {
	transform: translateZ(20px);
}

/* ==============================
   Pull quote marks animate
   ============================== */
.ar-pull__mark {
	display: inline-block;
	transform: translateY(20px);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}

.is-visible > .ar-pull__mark,
.ar-pull.is-visible .ar-pull__mark {
	transform: translateY(0);
	opacity: 0.55;
}

/* ==============================
   Parallax shell — JS sets --ar-py via scroll
   ============================== */
.ar-parallax {
	transform: translate3d(0, var(--ar-py, 0px), 0);
	will-change: transform;
}

/* ==============================
   Financial bars — animate in
   ============================== */
.ar-bar__value {
	font-variant-numeric: tabular-nums;
}

/* Bars respond to JS is-visible class (already in base) */

/* ==============================
   Section transitions — rule crawl
   ============================== */
.ar-rule-crawl {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	background: var(--ar-gold);
	opacity: 0.4;
	pointer-events: none;
}

.ar-rule-crawl--top {
	top: 0;
	height: 0;
	transition: height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-rule-crawl--top.is-visible {
	height: 48px;
}

/* ==============================
   Responsive overrides for interactive elements
   ============================== */
@media (max-width: 960px) {
	.ar-chapters {
		display: none;
	}

	.ar-vision-sticky__grid {
		grid-template-columns: 1fr;
	}

	.ar-vision-sticky__left {
		position: static;
		height: auto;
		display: block;
		margin-bottom: 2rem;
	}

	.ar-vision-sticky__left .ar-vision__head {
		position: static;
		top: auto;
		margin-bottom: 2rem;
	}

	.ar-vision-sticky__panels {
		gap: 3rem;
		padding-top: 0;
		padding-bottom: 0;
	}

	.ar-vision-panel {
		min-height: auto;
		opacity: 1;
		transform: none;
	}

	/* .ar-dotmap has no padding at any breakpoint */
}

@media (max-width: 600px) {
	.ar-pcard {
		flex: 0 0 260px;
	}

	.ar-map__tooltip {
		min-width: 160px;
		font-size: 0.75rem;
	}
}

/* ==============================
   Reduced motion
   ============================== */
@media (prefers-reduced-motion: reduce) {
	.ar-reveal,
	.ar-reveal.is-visible,
	.ar-bar__fill,
	.ar-cover__scroll::after,
	.ar-cover__title-inner,
	.ar-cover__year-char,
	.ar-cover__sub,
	.ar-cover__tag,
	.ar-cover__meta,
	.ar-cover__foot,
	.ar-particle,
	.ar-dotmap__ring,
	.ar-scroller__hint::after,
	.ar-pull__mark {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.ar-bar__fill {
		width: var(--ar-bar-pct, 0%) !important;
	}

	.ar-parallax {
		transform: none !important;
	}
}