/* ==========================================================================
   Bandhab — band system and modules
   Every value references a token. No literal colours, sizes or radii here.
   ========================================================================== */

/* --- The band: the spine of every page ---------------------------------- */

.bh-band {
	padding-block: var(--band-padding-y);
	padding-inline: var(--band-padding-x);
	background: var(--surface-page);
	color: var(--text-body);
}

.bh-band__inner {
	max-width: var(--container);
	margin-inline: auto;
}

.bh-band--prose .bh-band__inner {
	max-width: var(--container-text);
}

.bh-band--page  { background: var(--surface-page); }
.bh-band--sand  { background: var(--surface-sand); }
.bh-band--deep  { background: var(--surface-deep); color: var(--text-invert); }
.bh-band--clay  { background: var(--surface-clay); color: var(--text-invert); }
.bh-band--sage  { background: var(--surface-sage); }
.bh-band--lagoon{ background: var(--surface-lagoon); }

/* Type inverts wholesale on the dark bands. */
.bh-band--deep :where(h1,h2,h3,h4),
.bh-band--clay :where(h1,h2,h3,h4) { color: var(--text-invert); }
.bh-band--deep p, .bh-band--clay p { color: var(--text-invert-muted); }
.bh-band--deep a:not(.bh-btn), .bh-band--clay a:not(.bh-btn) { color: var(--link-invert); }

/* --- Eyebrow: the one deliberate lowercase element ----------------------- */

.bh-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	line-height: var(--leading-mono);
	text-transform: lowercase;
	color: var(--text-muted);
	margin-block-end: var(--space-4);
}

.bh-band--deep .bh-eyebrow,
.bh-band--clay .bh-eyebrow { color: var(--text-invert-muted); }

.bh-eyebrow--rule::after {
	content: "";
	display: block;
	width: var(--space-8);
	height: 1px;
	background: var(--border-hairline);
	margin-block-start: var(--space-3);
}

.bh-band--deep .bh-eyebrow--rule::after { background: var(--border-invert); }

/* --- Section heading ----------------------------------------------------- */

.bh-section-heading { margin-block-end: var(--space-7); }
.bh-section-heading__lede {
	font-size: var(--type-lede);
	line-height: var(--leading-body);
	max-width: 58ch;
	margin-block-start: var(--space-5);
}

/* --- Hero: display headline + the signature mono intro ------------------- */

.bh-hero__headline { margin-block-end: var(--space-6); }

.bh-hero__intro {
	font-family: var(--font-mono);
	font-size: var(--type-mono);
	line-height: var(--leading-mono);
	max-width: 44ch;
	color: var(--text-muted);
	margin-block-end: var(--space-7);
}

.bh-band--deep .bh-hero__intro { color: var(--text-invert-muted); }

/* --- Buttons: pill, mono caps ------------------------------------------- */

.bh-btn {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--type-mono);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-6);
	border: var(--border-width-strong) solid transparent;
	cursor: pointer;
	transition:
		background-color var(--motion-fast) var(--ease-out),
		color var(--motion-fast) var(--ease-out),
		border-color var(--motion-fast) var(--ease-out),
		transform var(--motion-base) var(--ease-out);
}

.bh-btn--primary {
	background: var(--accent-primary);
	color: var(--text-invert);
	border-color: var(--accent-primary);
}
.bh-btn--primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: var(--text-invert); }
.bh-btn--primary:active { background: var(--accent-primary-press); border-color: var(--accent-primary-press); }

.bh-btn--secondary {
	background: transparent;
	color: var(--text-strong);
	border-color: var(--border-strong);
}
.bh-btn--secondary:hover { background: var(--surface-sand); color: var(--text-strong); }

.bh-btn--invert {
	background: transparent;
	color: var(--text-invert);
	border-color: var(--border-invert);
}
.bh-btn--invert:hover { background: var(--surface-deep-soft); color: var(--text-invert); }

.bh-btn--solid-invert {
	background: var(--warm-50);
	color: var(--warm-900);
	border-color: var(--warm-50);
}
.bh-btn--solid-invert:hover { background: var(--warm-200); color: var(--warm-900); }

.bh-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--text-accent);
	padding-inline: 0;
}
.bh-btn--ghost::after { content: " \2192"; }
.bh-btn--ghost:hover { color: var(--accent-primary-press); }

.bh-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}

/* --- PhotoFrame: type never sits on top of photography ------------------- */

.bh-photo { margin: 0; }

.bh-photo__media {
	display: block;
	width: 100%;
	border-radius: var(--radius-photo);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	background:
		linear-gradient(135deg,
			var(--warm-300) 0%,
			var(--clay-200) 45%,
			var(--apricot-200) 100%);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.bh-photo--portrait .bh-photo__media { aspect-ratio: 3 / 4; }
.bh-photo--wide .bh-photo__media { aspect-ratio: 16 / 9; }

.bh-photo__caption {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-faint);
	margin-block-start: var(--space-3);
}

.bh-photo--tilt-left  { transform: rotate(-1.5deg); }
.bh-photo--tilt-right { transform: rotate(1.5deg); }

/* --- Split: prose beside a photo ---------------------------------------- */

.bh-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(var(--space-6), 5vw, var(--space-9));
	align-items: center;
}

.bh-split__prose > :last-child { margin-block-end: 0; }
.bh-split--media-first .bh-split__media { order: -1; }

/* --- Stat tiles ---------------------------------------------------------- */

.bh-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: var(--space-5);
}

.bh-stat {
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--surface-sand);
}

.bh-stat--sage   { background: var(--surface-sage); }
.bh-stat--lagoon { background: var(--surface-lagoon); }
.bh-stat--clay   { background: var(--clay-100); }

.bh-stat__value {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--type-display-3);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	color: var(--text-strong);
}

.bh-stat__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	line-height: var(--leading-mono);
	color: var(--text-muted);
	margin-block-start: var(--space-3);
}

/* --- Story cards: the image is the card, no panel ------------------------ */

.bh-stories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.bh-story { display: flex; flex-direction: column; }
.bh-story__media-wrap { position: relative; display: block; }

.bh-story:hover .bh-photo__media {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.bh-story__badge {
	position: absolute;
	inset-block-end: var(--space-4);
	inset-inline-start: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-invert);
	background: var(--overlay-scrim);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
}

.bh-story__meta {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-faint);
	margin-block-start: var(--space-4);
}

.bh-band--deep .bh-story__meta { color: var(--text-invert-muted); }

/* Story titles are the one place titles stay sentence-case serif. */
.bh-story__title {
	font-family: var(--font-body) !important;
	font-size: var(--type-lede) !important;
	font-weight: 600 !important;
	line-height: var(--leading-tight) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin-block-start: var(--space-2) !important;
}

.bh-story__title a { color: inherit; text-decoration: none; }
.bh-story__title a:hover { color: var(--text-accent); }
.bh-band--deep .bh-story__title { color: var(--text-invert) !important; }

/* --- Quote: the type does the work, no quote marks ----------------------- */

.bh-quote { margin: 0; max-width: 20ch; }

.bh-quote__text {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--type-display-3);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	color: var(--text-strong);
	margin: 0;
}

.bh-band--deep .bh-quote__text { color: var(--text-invert); }

.bh-quote__attribution {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-muted);
	margin-block-start: var(--space-5);
}

.bh-band--deep .bh-quote__attribution { color: var(--text-invert-muted); }

/* --- Callout ------------------------------------------------------------- */

.bh-callout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(var(--space-6), 5vw, var(--space-9));
	align-items: center;
}

.bh-callout__body { max-width: 52ch; }

/* --- Tags ---------------------------------------------------------------- */

.bh-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-4);
	background: var(--clay-100);
	color: var(--clay-700);
}

.bh-tag--sage   { background: var(--sage-100);   color: var(--sage-700); }
.bh-tag--lagoon { background: var(--lagoon-100); color: var(--lagoon-700); }
.bh-tag--invert { background: var(--surface-deep-soft); color: var(--text-invert); }

/* --- Team ---------------------------------------------------------------- */

.bh-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}

.bh-team__name {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--type-display-4);
	text-transform: uppercase;
	line-height: var(--leading-display);
	margin-block-start: var(--space-4);
	color: var(--text-strong);
}

.bh-team__role,
.bh-team__email {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-muted);
	margin-block-start: var(--space-2);
}

.bh-band--deep .bh-team__name { color: var(--text-invert); }
.bh-band--deep .bh-team__role { color: var(--text-invert-muted); }

/* --- Resource / report cards -------------------------------------------- */

.bh-resources {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}

.bh-resource__title {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--type-display-4);
	text-transform: uppercase;
	line-height: var(--leading-display);
	margin-block: var(--space-4) var(--space-5);
	color: var(--text-strong);
}

/* --- Accordion: hairlines, never boxes ---------------------------------- */

.bh-accordion { border-block-start: 1px solid var(--border-hairline); }

.bh-accordion__item { border-block-end: 1px solid var(--border-hairline); }

.bh-accordion__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5);
	cursor: pointer;
	padding-block: var(--space-5);
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--type-display-4);
	text-transform: uppercase;
	line-height: var(--leading-display);
	color: var(--text-strong);
	list-style: none;
}

.bh-accordion__item summary::-webkit-details-marker { display: none; }

.bh-accordion__item summary::after {
	content: "+";
	font-family: var(--font-mono);
	font-size: var(--type-display-4);
	color: var(--text-muted);
	transition: transform var(--motion-base) var(--ease-out);
	flex: none;
}

.bh-accordion__item[open] summary::after { transform: rotate(45deg); }

.bh-accordion__body { padding-block-end: var(--space-5); max-width: 58ch; }

.bh-band--deep .bh-accordion { border-color: var(--border-invert); }
.bh-band--deep .bh-accordion__item { border-color: var(--border-invert); }
.bh-band--deep .bh-accordion__item summary { color: var(--text-invert); }

/* --- Filter bar: mono pills, active inverts ----------------------------- */

.bh-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-end: var(--space-7);
	padding: 0;
	list-style: none;
}

.bh-filters a {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-5);
	border: var(--border-width) solid var(--border-soft);
	color: var(--text-body);
	transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.bh-filters a:hover { background: var(--surface-sand); color: var(--text-strong); }

.bh-filters .is-active a,
.bh-filters a[aria-current="page"] {
	background: var(--surface-deep);
	border-color: var(--surface-deep);
	color: var(--text-invert);
}

/* --- Donation tiers ------------------------------------------------------ */

.bh-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}

.bh-tier {
	padding: var(--space-7);
	border-radius: var(--radius-xl);
	background: var(--surface-raised);
	box-shadow: var(--shadow-inset-hairline);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.bh-tier__frequency {
	font-family: var(--font-mono);
	font-size: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: lowercase;
	color: var(--text-muted);
}

.bh-tier__amounts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.bh-tier__amount {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--type-display-4);
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	border: var(--border-width-strong) solid var(--border-strong);
	padding: var(--space-2) var(--space-5);
	color: var(--text-strong);
}

.bh-tier__outcome {
	font-size: var(--type-body-sm);
	color: var(--text-muted);
	margin: 0;
}

/* --- Forms --------------------------------------------------------------- */

.bh-form-card {
	padding: clamp(var(--space-6), 4vw, var(--space-8));
	border-radius: var(--radius-xl);
	background: var(--surface-raised);
	box-shadow: var(--shadow-inset-hairline);
}

.bh-band--deep .bh-form-card { color: var(--text-body); }
.bh-band--deep .bh-form-card :where(h1,h2,h3,h4) { color: var(--text-strong); }
.bh-band--deep .bh-form-card p { color: var(--text-body); }

/* --- Utilities ----------------------------------------------------------- */

.bh-prose { max-width: 58ch; }
.bh-stack > * + * { margin-block-start: var(--space-5); }
.bh-divider { border: 0; border-block-start: 1px solid var(--border-hairline); margin-block: var(--space-7); }
.bh-band--deep .bh-divider { border-color: var(--border-invert); }

.bh-placeholder-note {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-faint);
}

/* --- Motion: restrained, and off entirely when asked -------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.bh-story:hover .bh-photo__media { transform: none; }
	.bh-photo--tilt-left, .bh-photo--tilt-right { transform: none; }
}

/* --- Header: sticky, hairline edge, type wordmark ----------------------- */

.bh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-page);
	border-block-end: 1px solid var(--border-hairline);
	padding-block: var(--space-4);
	padding-inline: var(--band-padding-x);
}

.bh-header__inner {
	max-width: var(--container);
	margin-inline: auto;
}

/* There is no logo file in this system — the wordmark is type in a box. */
.bh-wordmark a,
.bh-wordmark {
	font-family: var(--font-display) !important;
	font-weight: var(--weight-display) !important;
	font-size: var(--type-display-4) !important;
	letter-spacing: var(--tracking-display);
	text-transform: uppercase !important;
	text-decoration: none;
	line-height: 1 !important;
}

.bh-wordmark a {
	display: inline-block;
	background: var(--surface-deep);
	color: var(--text-invert) !important;
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-4);
}

.bh-wordmark a:hover { background: var(--warm-800); }

.bh-wordmark--invert a {
	background: transparent;
	color: var(--text-invert) !important;
	padding-inline: 0;
}

/* Navigation: two words max, uppercase, pure type — no icons. */
.bh-nav a {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-body);
	transition: color var(--motion-fast) var(--ease-out);
}

.bh-nav a:hover,
.bh-nav .current-menu-item > a {
	color: var(--text-accent);
}

/* --- Footer -------------------------------------------------------------- */

.bh-footer__tagline {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-invert-muted);
	margin-block-start: var(--space-5);
	max-width: 30ch;
}

.bh-footer__heading {
	font-size: var(--type-display-4) !important;
	color: var(--text-invert) !important;
	margin-block-end: var(--space-4) !important;
}

.bh-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bh-footer__links li { margin-block-end: var(--space-3); }

.bh-footer__links a {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	text-transform: uppercase;
	letter-spacing: var(--tracking-button);
	text-decoration: none;
	color: var(--text-invert-muted);
}

.bh-footer__links a:hover { color: var(--text-invert); }

.bh-footer__legal {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-invert-muted);
	margin: 0;
}

/* --- Focus: 2px ochre ring at 2px offset, per the design system ---------- */

:where(a, button, summary, input, select, textarea, .bh-btn):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

:where(input, select, textarea):focus-visible {
	box-shadow: 0 0 0 3px var(--clay-100);
}

/* Skip link for keyboard users. */
.bh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--surface-deep);
	color: var(--text-invert);
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
}

.bh-skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

/* --- Core button block variants ------------------------------------------ */

.wp-block-button.bh-btn-secondary .wp-block-button__link {
	background: transparent;
	color: var(--text-strong);
	border: var(--border-width-strong) solid var(--border-strong);
}
.wp-block-button.bh-btn-secondary .wp-block-button__link:hover { background: var(--surface-sand); }

.wp-block-button.bh-btn-invert .wp-block-button__link {
	background: transparent;
	color: var(--text-invert);
	border: var(--border-width-strong) solid var(--border-invert);
}
.wp-block-button.bh-btn-invert .wp-block-button__link:hover { background: var(--surface-deep-soft); }

.wp-block-button.bh-btn-solid-invert .wp-block-button__link {
	background: var(--warm-50);
	color: var(--warm-900);
}
.wp-block-button.bh-btn-solid-invert .wp-block-button__link:hover { background: var(--warm-200); }

/* Images inside a photo frame carry the frame's radius and shadow. */
.bh-photo .wp-block-image img,
.bh-photo img {
	border-radius: var(--radius-photo);
	box-shadow: var(--shadow-md);
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.bh-photo--portrait img { aspect-ratio: 3 / 4; }
.bh-photo--wide img { aspect-ratio: 16 / 9; }
.bh-photo img { aspect-ratio: 4 / 3; }

/* --- Fluent Forms, dressed as Bandhab ------------------------------------ */

.fluentform .ff-el-input--label label {
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	font-weight: 600;
	color: var(--text-strong);
	margin-block-end: var(--space-2);
}

/* "(required)" in muted small type — never an asterisk. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	content: " (required)";
	color: var(--text-faint);
	font-size: var(--type-caption);
	font-weight: 400;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform select,
.fluentform textarea {
	font-family: var(--font-body);
	font-size: var(--type-body);
	color: var(--text-body);
	background: var(--surface-raised);
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	width: 100%;
	transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	border-color: var(--accent-primary);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--clay-100);
}

.fluentform .ff-el-form-check label {
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	color: var(--text-body);
}

.fluentform input[type="checkbox"] {
	accent-color: var(--accent-primary);
	width: 1.05em;
	height: 1.05em;
	border-radius: var(--radius-sm);
}

.fluentform .ff-btn-submit {
	font-family: var(--font-mono) !important;
	font-size: var(--type-mono) !important;
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	background: var(--accent-primary) !important;
	color: var(--text-invert) !important;
	border: var(--border-width-strong) solid var(--accent-primary) !important;
	border-radius: var(--radius-pill) !important;
	padding: var(--space-3) var(--space-6) !important;
	transition: background-color var(--motion-fast) var(--ease-out);
}

.fluentform .ff-btn-submit:hover {
	background: var(--accent-primary-hover) !important;
	border-color: var(--accent-primary-hover) !important;
}

.fluentform .error-text,
.fluentform .text-danger {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--clay-600);
}

.ff-message-success {
	font-family: var(--font-body);
	background: var(--sage-100);
	border: var(--border-width) solid var(--sage-300);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	color: var(--text-body);
}

/* ==========================================================================
   Block-native module markup
   The modules are core blocks now, not raw HTML, so these selectors follow
   what WordPress actually renders: post-template lists, bound paragraphs,
   heading elements and the core details block.
   ========================================================================== */

/* --- Team grid: a Query Loop over People --------------------------------- */

.bh-team {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bh-team > li { margin: 0; }

.bh-team .bh-photo,
.bh-team .wp-block-post-featured-image {
	margin: 0 0 var(--space-4);
}

.bh-team .bh-team__name {
	font-size: var(--type-display-4);
	line-height: var(--leading-display);
	margin: 0;
}

.bh-team .bh-team__role,
.bh-team .bh-team__email {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	line-height: var(--leading-mono);
	color: var(--text-muted);
	margin: var(--space-2) 0 0;
}

/* A person with no role or email should not leave a gap. */
.bh-team__role:empty,
.bh-team__email:empty { display: none; }

/* --- Stat tiles: heading + paragraph inside a grid group ----------------- */

.bh-stats > .bh-stat { margin: 0; }

.bh-stat .bh-stat__value {
	font-size: var(--type-display-3);
	margin: 0;
}

.bh-stat .bh-stat__label { margin: var(--space-3) 0 0; }

/* --- Donation tiers ------------------------------------------------------ */

.bh-tiers > .bh-tier { margin: 0; }
.bh-tier > * { margin-block: 0; }

.bh-tier__amounts {
	gap: var(--space-3);
	margin-block: 0;
}

.bh-tier .bh-tier__amount { margin: 0; }
.bh-tier .bh-tier__frequency { margin: 0; }
.bh-tier .bh-tier__outcome { margin: 0; }

/* --- Resource cards ------------------------------------------------------ */

.bh-resources > .bh-resource { margin: 0; }
.bh-resource .bh-photo { margin: 0; }
.bh-resource .bh-resource__title { font-size: var(--type-display-4); }

/* --- Accordion: the core details block ----------------------------------- */

.bh-accordion .wp-block-details {
	border-block-end: 1px solid var(--border-hairline);
	margin: 0;
}

.bh-accordion .wp-block-details > summary { padding-block: var(--space-5); }
.bh-accordion .wp-block-details[open] > summary::after { transform: rotate(45deg); }
.bh-accordion .wp-block-details > :not(summary) {
	padding-block-end: var(--space-5);
	max-width: 58ch;
	margin-block: 0;
}

.bh-band--deep .bh-accordion .wp-block-details { border-color: var(--border-invert); }

/* --- Quote --------------------------------------------------------------- */

.bh-quote > * { margin-block: 0; }
.bh-quote .bh-quote__text { margin: 0; }

/* --- Byline: who wrote this ---------------------------------------------- */

.bh-byline {
	font-family: var(--font-mono);
	font-size: var(--type-caption);
	color: var(--text-muted);
	margin-block: var(--space-3) 0;
}

.bh-byline a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bh-byline a:hover { color: var(--text-accent); }

/* ==========================================================================
   Corrections
   ========================================================================== */

/* WordPress escapes "--" inside block ATTRIBUTES, so a dynamic block such as
   post-featured-image renders class="bh-photou002du002dportrait". Modifier
   classes passed to dynamic blocks therefore use a single hyphen. Both spellings
   are matched here so older content keeps working.
   Declared after the base .bh-photo rule on purpose: same specificity, so source
   order decides, and the modifier has to win. */
.bh-photo-portrait img,
.bh-photo--portrait img,
.bh-photou002du002dportrait img {
	aspect-ratio: 3 / 4;
}

.bh-photo-wide img,
.bh-photo--wide img,
.bh-photou002du002dwide img {
	aspect-ratio: 16 / 9;
}

/* --- Team cards: tighter, and aligned across a row ----------------------- */

.bh-team {
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}

/* The card is a column so the pieces sit close together, not on the page's
   default block rhythm. */
.bh-team > li {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bh-team .bh-photo,
.bh-team .wp-block-post-featured-image {
	margin: 0 0 var(--space-5);
}

/* Two lines reserved, so a name that wraps does not push its role and email
   out of line with the cards beside it. */
.bh-team .bh-team__name {
	font-size: var(--type-display-4);
	line-height: var(--leading-display);
	min-height: calc(2em * var(--leading-display));
	margin: 0;
	text-wrap: balance;
}

.bh-team .bh-team__role {
	margin: var(--space-3) 0 0;
}

.bh-team .bh-team__email {
	margin: var(--space-1) 0 0;
	word-break: break-word;
}

/* --- Grid gaps, per the design system's spacing scale -------------------- */

.bh-stats,
.bh-tiers,
.bh-resources,
.bh-stories {
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}

/* Footer legal row: separate blocks so each can bind to its own field. */
.bh-footer__legal-row { gap: var(--space-2) var(--space-5); }
.bh-footer__legal-row .bh-footer__legal { margin: 0; }
.bh-footer__legal:empty { display: none; }

/* ==========================================================================
   Grid rhythm, taken from the design system rather than invented
   --------------------------------------------------------------------------
   Measured from ui_kits/website/*.jsx and templates/ngo-landing:
     team        minmax(180px)  gap space-6  (ConnectScreen)
     stats       minmax(190px)  gap space-5  (HomeScreen)
     story cards minmax(240px)  gap space-6  (HomeScreen)
     story arch. minmax(260px)  gap space-7 / space-6  (StoriesScreen)
     resources   minmax(260px)  gap space-7  (CountryScreen)
     text+photo  minmax(300px)  gap clamp(28px,5vw,72px)  (NgoLanding)
     callout     minmax(280px)  gap clamp(24px,5vw,64px)  (NgoLanding)
   Declared last so these win over the earlier approximations.
   ========================================================================== */

.bh-team      { gap: var(--space-6); }
.bh-stats     { gap: var(--space-5); }
.bh-stories   { gap: var(--space-7) var(--space-6); }
.bh-resources { gap: var(--space-7); }
.bh-tiers     { gap: var(--space-7); }
.bh-split     { gap: clamp(28px, 5vw, 72px); }
.bh-callout   { gap: clamp(24px, 5vw, 64px); }

/* --- Team card, matching components/blocks/TeamCard.jsx ------------------ */

.bh-team > li {
	display: grid;
	align-content: start;
	gap: 0;
}

/* Photo to text block: 12px. Within the text block: 4px. */
.bh-team .bh-photo,
.bh-team .wp-block-post-featured-image {
	margin: 0 0 var(--space-3);
}

/* The design system sets the name in body-sm sentence case, not display caps.
   An uppercase 24px heading made every card top-heavy and wrapped short names
   onto two lines. Overriding the theme.json heading element styles. */
.bh-team .bh-team__name,
.bh-team h3.bh-team__name {
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-strong);
	margin: 0;
	min-height: 0;
}

.bh-team .bh-team__role  { margin: var(--space-1) 0 0; line-height: 1.5; }
.bh-team .bh-team__email { margin: var(--space-1) 0 0; line-height: 1.5; }

/* --- Stat tile, matching components/blocks/StatTile.jsx ------------------ */

.bh-stat { padding: var(--space-6); }

.bh-stat .bh-stat__value {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	line-height: 0.95;
	margin: 0;
}

.bh-stat .bh-stat__label {
	letter-spacing: 0.04em;
	line-height: 1.45;
	margin: var(--space-2) 0 0;
}

/* ==========================================================================
   Module rhythm and empty photo frames
   --------------------------------------------------------------------------
   Two things were wrong and they compounded each other.

   1. The parent theme sets core/post-template's block gap to
      var(--wp--preset--spacing--medium). That preset only exists inside the
      theme's button scope, never at :root, so on a query loop the variable
      resolved to nothing, gap fell back to its initial value and the team and
      story cards sat flush against one another — portraits touching, shadows
      bleeding into the next card. The child theme.json now names a real token,
      and these rules restate the design system's own gaps on top of it.

   2. WordPress's grid layout emits auto-fill, so four people on a wide row
      left two empty tracks and every card stayed at its minimum width. The
      design system uses auto-fit (ui_kits/website/ConnectScreen.jsx), where the
      cards share the row out between them. Both rules below carry two classes
      on purpose: the generated .wp-container-* layout rule prints after this
      stylesheet, so a single class would lose the tie.
   ========================================================================== */

.wp-block-post-template.bh-team {
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	column-gap: var(--space-6);
	row-gap: var(--space-8);
}

.wp-block-post-template.bh-stories {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	column-gap: var(--space-6);
	row-gap: var(--space-8);
}

/* Everything else laid out as a grid of cards gets the same breathing room
   between rows — a row gap that matches the column gap reads as a mesh, not as
   a set of separate modules. */
.bh-stats,
.bh-tiers,
.bh-resources {
	row-gap: var(--space-8);
}

/* --- The empty photo frame ----------------------------------------------
   A picture that has not been chosen yet. Same shape, shadow and radius as a
   real one, so the layout does not jump when the photograph arrives, but
   unmistakably unfinished. Mirrors PhotoFrame's empty state in the design
   system (components/core/PhotoFrame.jsx). */

.bh-photo--empty {
	margin: 0;
}

.bh-photo__empty {
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-photo);
	overflow: hidden;
	background: linear-gradient(160deg, var(--warm-300), var(--warm-400));
	box-shadow: var(--shadow-md);
}

.bh-photo-portrait .bh-photo__empty,
.bh-photo--portrait .bh-photo__empty,
.bh-photou002du002dportrait .bh-photo__empty { aspect-ratio: 3 / 4; }

.bh-photo-wide .bh-photo__empty,
.bh-photo--wide .bh-photo__empty,
.bh-photou002du002dwide .bh-photo__empty { aspect-ratio: 16 / 9; }

.bh-photo__empty-label {
	font-family: var(--font-mono);
	font-size: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--warm-700);
}

/* For an editor, the frame is the way in: the whole thing is one target that
   opens the record where the picture belongs. Everyone else sees the frame
   above and no invitation they cannot act on. */
.bh-photo__add {
	/* Stretch, not centre: the anchor has to fill the frame so the whole
	   picture-shaped hole is the target, not just the words inside it. */
	place-self: stretch;
	display: grid;
	place-items: center;
	align-content: center;
	gap: var(--space-3);
	padding: var(--space-4);
	text-align: center;
	text-decoration: none;
	color: var(--warm-700);
	background: transparent;
	transition: background var(--motion-base) var(--ease-out);
}

.bh-photo__add:hover,
.bh-photo__add:focus-visible {
	background: color-mix(in oklab, var(--warm-50) 45%, transparent);
}

.bh-photo__add-cta {
	font-family: var(--font-mono);
	font-size: var(--type-eyebrow);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	color: var(--warm-900);
	border: var(--border-width-strong) solid var(--warm-900);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-4);
	background: var(--warm-50);
	max-inline-size: 100%;
	text-wrap: balance;
}

/* On the dark bands the frame keeps its warm fill, so only the call to action
   needs re-stating — it must not read as a hole punched in the band. */
.bh-band--deep .bh-photo__add-cta,
.bh-band--clay .bh-photo__add-cta {
	color: var(--warm-900);
	border-color: var(--warm-900);
}

@media (prefers-reduced-motion: reduce) {
	.bh-photo__add { transition: none; }
}

/* --- Article lede --------------------------------------------------------
   The opening paragraph of a story, set a step up from the body so the eye has
   somewhere to land. Serif, not mono: .bh-hero__intro is the mono voice and it
   belongs to page tops, not to prose. Used by the Story post pattern. */

.bh-lede {
	font-size: var(--type-lede);
	line-height: var(--leading-body);
	color: var(--text-strong);
	max-width: 58ch;
	margin-block-end: var(--space-6);
}

.bh-band--deep .bh-lede,
.bh-band--clay .bh-lede { color: var(--text-invert); }

/* --- Narrow-screen safety net --------------------------------------------
   The display face is condensed and the headline floor is 48px, so a single
   long compound word — the kind Danish produces routinely — can be wider than
   a 320px phone and push the whole page sideways. overflow-wrap only acts when
   a word genuinely will not fit, so nothing changes at any width where the
   text already fits. Applied to the places that take user-entered strings. */

.bh-hero__headline,
.bh-band :where(h1, h2, h3, h4),
.bh-team__name,
.bh-story__title,
.bh-stat__value,
.bh-wordmark,
.bh-wordmark a {
	overflow-wrap: break-word;
}

/* Email addresses and URLs have no break opportunities at all. */
.bh-team__email,
.bh-footer__legal,
.bh-prose a {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Mobile pass
   ========================================================================== */

/* --- The divider was never a divider -------------------------------------
   theme.json emits `:root :where(.wp-block-separator:not(.is-style-wide)…)
   { width: 100px }`, and .bh-divider only ever restyled the border — so the
   rule that was meant to run across a footer or a section rendered as a 100px
   dash centred in a 1178px container, at every screen width. Measured, not
   guessed: 100px in a 1178px parent. Claiming the width back here. */

.bh-divider,
.wp-block-separator.bh-divider {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* --- Tap targets ---------------------------------------------------------
   WCAG 2.5.8 wants 24px. These links render at 15px (footer) and 21px (the
   inline nav at tablet width and up). Both scrape by on the spacing exception
   today, which is not the same as being comfortable under a thumb. Padding the
   link box rather than growing the type, so nothing about the layout moves. */

.bh-footer__links a,
.bh-footer__legal a {
	display: inline-block;
	padding-block: var(--space-2);
}

.bh-nav .wp-block-navigation-item__content {
	display: block;
	padding-block: var(--space-2);
}

/* The list rows already carried their own spacing; the padding above replaces
   part of it so the footer does not grow taller than it was. */
.bh-footer__links li { margin-block: 0; }

/* --- Phones: two people to a row ----------------------------------------
   At 390px the 200px minimum column allowed exactly one card, so four people
   became an 8,700px scroll of full-width portraits. 150px fits two with the
   32px gap intact on a 350px content width. Scoped to small screens so the
   tablet and desktop grids keep the design system's proportions. */

@media (max-width: 600px) {
	/* 140px, not 150px: a 360px phone leaves 320px of content width, and
	   2 x 140 + 32 is 312. At 150 the second column did not fit and the
	   smallest phones stayed on a single-column scroll. */
	.wp-block-post-template.bh-team {
		grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
		row-gap: var(--space-6);
	}

	/* A name and role in a 150px column need to break rather than push. */
	.bh-team__name,
	.bh-team__role,
	.bh-team__email { overflow-wrap: anywhere; }
}

/* --- Post meta links -----------------------------------------------------
   The category eyebrow and the "Written by" byline are links too, and they
   render at 14-15px. Same treatment as the footer: pad the box, leave the
   type alone. */

.bh-eyebrow a,
.bh-byline a,
.bh-story__meta a {
	display: inline-block;
	padding-block: var(--space-1);
}