/*
 * pages.css — the non-blog pages: home (/), About us, Initiatives, Campaigns,
 * Cultural Documentation, Volunteer, Contact and Wiki Loves Folklore.
 * Loaded after blog.css (base, .ohf-wrap, .ohf-eyebrow, .ohf-lede) and before
 * site-chrome.css (tokens, .ohf-btn).
 *
 * Contents: photo hero, section layout, Initiatives feature rows, campaign
 * cards, collection tiles, CTA band, volunteer form, contact cards, home page,
 * About page, then responsive, reduced-motion and dark-mode overrides.
 */

/* ==========================================================================
   Photo hero (section pages)
   ========================================================================== */

.ohf-hero {
	position: relative;
	min-height: min(70vh, 640px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--ohf-night);
	color: #fff;
}
.ohf-hero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
/* Left-to-right + bottom gradient keeps the white text readable on any photo. */
.ohf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 16, 12, 0.82) 0%, rgba(20, 16, 12, 0.55) 55%, rgba(20, 16, 12, 0.2) 100%),
		linear-gradient(0deg, rgba(20, 16, 12, 0.5), transparent 50%);
}
.ohf-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 140px; padding-bottom: 72px; }
.ohf-hero h1 {
	max-width: 760px;
	color: #fff;
	font-size: clamp(38px, 6vw, 72px);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.05;
}
.ohf-hero__lede { max-width: 600px; margin: 22px 0 0; color: rgba(255, 255, 255, 0.88); font-size: clamp(16.5px, 1.6vw, 19px); }
.ohf-eyebrow--light,
.ohf-hero .ohf-eyebrow { color: var(--ohf-sand); }
/* Photo credit, bottom-right corner of the hero */
.ohf-hero__credit {
	position: absolute;
	right: 16px;
	bottom: 10px;
	z-index: 1;
	margin: 0;
	max-width: 60%;
	color: rgba(255, 255, 255, 0.6);
	font-size: 11.5px;
	text-align: right;
}

/* ==========================================================================
   Sections and shared content blocks
   ========================================================================== */
.ohf-section { padding: 96px 0; }
.ohf-section--beige { background: var(--ohf-beige); }
.ohf-section-head { max-width: 720px; margin-bottom: 44px; }
.ohf-section-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.01em; }
.ohf-section-head .ohf-lede { font-size: 17px; }
.ohf-body { color: var(--ohf-text); font-size: 17px; line-height: 1.75; }
.ohf-body p { margin: 0 0 1.2em; }

/* Two columns: text + illustration. minmax(0, …) stops wide content from
   overflowing its column. */
.ohf-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}
.ohf-split--wide-text { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.ohf-split .ohf-section-head { margin-bottom: 24px; }
.ohf-split__art { margin: 0; position: sticky; top: 110px; } /* 110px = below the sticky header */
.ohf-split__art img { width: 100%; border-radius: 16px; }

/* Pull quote */
.ohf-pull {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--ohf-ochre);
	color: var(--ohf-ink);
	font: italic 400 22px/1.5 "PT Serif", Georgia, serif;
}

.ohf-video { margin: 0; }
.ohf-video video { display: block; width: 100%; max-height: 520px; border-radius: 16px; background: #000; box-shadow: var(--ohf-shadow-lg); }
.ohf-video figcaption { margin-top: 10px; color: var(--ohf-muted); font-size: 13.5px; text-align: center; }

/* ==========================================================================
   Initiatives: jump links + alternating feature rows
   ========================================================================== */
.ohf-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.ohf-jump a {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--ohf-surface);
	color: var(--ohf-ink) !important;
	font: 600 14px/1 "Montserrat", sans-serif;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--ohf-line);
	transition: box-shadow 0.2s, color 0.2s;
}
.ohf-jump a:hover { color: var(--ohf-ochre-dark) !important; box-shadow: inset 0 0 0 2px var(--ohf-ochre); }

.ohf-features { padding-top: 80px; padding-bottom: 96px; display: grid; gap: 96px; }
.ohf-features > div { scroll-margin-top: 100px; } /* jump-link targets clear the sticky header */
/* isolation: the offset beige panel behind the image (z-index: -1) stays inside the row. */
.ohf-feature { isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ohf-feature--flip .ohf-feature__media { order: 2; }
.ohf-feature__media { position: relative; }
/* Beige panel offset behind the image; mirrored on --flip rows. */
.ohf-feature__media::before {
	content: "";
	position: absolute;
	inset: 24px -24px -24px 24px;
	border-radius: 18px;
	background: var(--ohf-beige);
	z-index: -1;
}
.ohf-feature--flip .ohf-feature__media::before { inset: 24px 24px -24px -24px; }
.ohf-feature__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.ohf-feature__body .ohf-eyebrow { font-size: 15px; letter-spacing: 0.1em; }
.ohf-feature__body h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; margin-bottom: 18px; }
.ohf-feature__body p { margin: 0 0 1em; color: var(--ohf-text); font-size: 16.5px; line-height: 1.75; }
.ohf-feature__body .ohf-btn { margin-top: 10px; gap: 8px; }
.ohf-ext { flex: none; } /* external-link icon */

/* ==========================================================================
   Campaign cards
   ========================================================================== */
.ohf-campaigns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ohf-campaign {
	display: flex;
	flex-direction: column;
	background: var(--ohf-surface);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--ohf-shadow-sm);
}
.ohf-campaign__media { position: relative; aspect-ratio: 16 / 10; background: var(--ohf-media); }
.ohf-campaign__media img { width: 100%; height: 100%; object-fit: cover; }
/* Icon badge overlapping the bottom edge of the image */
.ohf-campaign__icon {
	position: absolute;
	left: 24px;
	bottom: -26px;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 14px;
	background: var(--ohf-ochre);
	color: var(--ohf-on-accent);
	box-shadow: 0 8px 20px rgba(201, 111, 44, 0.35);
}
.ohf-campaign__body { display: flex; flex-direction: column; flex: 1; padding: 44px 26px 28px; }
.ohf-campaign h3 { font-size: 21px; font-weight: 800; margin-bottom: 12px; }
.ohf-campaign p { margin: 0 0 20px; color: var(--ohf-text); font-size: 15.5px; line-height: 1.7; }
.ohf-campaign__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ohf-campaign__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 14px/1.3 "Montserrat", sans-serif;
	text-decoration: none;
}
.ohf-campaign__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Knowledge collection tiles (Cultural Documentation)
   ========================================================================== */
.ohf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.ohf-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 24px 24px;
	border-radius: 16px;
	background: var(--ohf-surface);
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: var(--ohf-shadow-sm);
	transition: transform 0.25s, box-shadow 0.25s;
}
.ohf-tile:hover { transform: translateY(-4px); box-shadow: var(--ohf-shadow-lg); }
.ohf-tile__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: 6px;
	border-radius: 14px;
	background: var(--ohf-tint);
	color: var(--ohf-ochre-dark);
}
.ohf-tile h3 { font-size: 18px; font-weight: 800; }
.ohf-tile p { margin: 0; color: var(--ohf-muted); font-size: 14.5px; line-height: 1.6; }
.ohf-tile__more {
	margin-top: auto;
	padding-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ohf-ochre-dark);
	font: 600 13.5px/1 "Montserrat", sans-serif;
}

/* ==========================================================================
   CTA band (ochre strip near the bottom of section pages)
   ========================================================================== */
.ohf-cta { background: var(--ohf-ochre); color: var(--ohf-on-accent); }
.ohf-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
	padding-top: 64px;
	padding-bottom: 64px;
}
.ohf-cta h2 { color: var(--ohf-on-accent); font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.ohf-cta p { margin: 10px 0 0; color: var(--ohf-on-accent); font-size: 17px; }
.ohf-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Fixed colours: these sit on the ochre band in both modes.
   Double class (.ohf-btn.ohf-btn--x) because site-chrome.css loads later and
   its .ohf-btn / .ohf-btn:hover would otherwise win. */
.ohf-btn.ohf-btn--light { background: #fff; color: #1c1915 !important; }
.ohf-btn.ohf-btn--light:hover, .ohf-btn.ohf-btn--light:focus-visible { background: #1c1915; color: #fff !important; }
.ohf-btn.ohf-btn--ghost { background: transparent; color: #1c1915 !important; box-shadow: inset 0 0 0 2px rgba(28, 25, 21, 0.85); }
.ohf-btn.ohf-btn--ghost:hover, .ohf-btn.ohf-btn--ghost:focus-visible { background: rgba(28, 25, 21, 0.1); }
.ohf-cta a:focus-visible { outline-color: #1c1915; }
/* Larger buttons in page content than in the header. */
.ohf-page .ohf-btn { padding: 14px 26px; font-size: 15px; }

/* ==========================================================================
   Volunteer: areas list, note, sign-up form
   ========================================================================== */
.ohf-volunteer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ohf-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ohf-areas li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--ohf-beige);
	color: var(--ohf-ink);
	font: 600 15px/1.3 "Montserrat", sans-serif;
}
.ohf-areas svg { flex: none; width: 24px; height: 24px; color: var(--ohf-ochre-dark); }
.ohf-note { margin-top: 32px; padding: 24px 26px; border-left: 4px solid var(--ohf-ochre); border-radius: 0 12px 12px 0; background: var(--ohf-tint-2); }
.ohf-note h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.ohf-note p { margin: 0; color: var(--ohf-text); overflow-wrap: anywhere; }

/* ---------- Form ----------
   Error states are set by the inline script in pages.py: .ohf-field__error
   messages, aria-invalid on fields and the .ohf-form__summary box. */
.ohf-form {
	position: sticky;
	top: 110px;
	padding: 40px;
	border-radius: 20px;
	background: var(--ohf-surface);
	box-shadow: var(--ohf-shadow-lg);
	border-top: 4px solid var(--ohf-ochre);
}
.ohf-form h2 { font-size: 26px; font-weight: 800; }
.ohf-form__hint { margin: 8px 0 24px; color: var(--ohf-muted); font-size: 14.5px; }
.ohf-form label { display: block; margin: 18px 0 8px; color: var(--ohf-ink); font: 600 14px/1.3 "Montserrat", sans-serif; }
.ohf-form input, .ohf-form select, .ohf-form textarea {
	display: block;
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid var(--ohf-line-strong);
	border-radius: 10px;
	background: var(--ohf-field);
	color: var(--ohf-ink);
	font: 400 15.5px/1.4 "Poppins", sans-serif;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.ohf-form textarea { resize: vertical; min-height: 130px; }
.ohf-form input:focus, .ohf-form select:focus, .ohf-form textarea:focus {
	border-color: var(--ohf-ochre);
	box-shadow: 0 0 0 4px rgba(226, 135, 67, 0.18);
}
.ohf-field__hint { margin: 6px 0 0; color: var(--ohf-muted); font-size: 13.5px; }
.ohf-field__error { display: flex; gap: 6px; margin: 8px 0 0; color: var(--ohf-error); font: 600 13.5px/1.4 "Montserrat", sans-serif; }
.ohf-field__error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ohf-error); color: var(--ohf-bg); font-size: 12px; }
/* display: flex above would otherwise override the hidden attribute. */
.ohf-field__error[hidden] { display: none; }
.ohf-form [aria-invalid="true"] { border-color: var(--ohf-error) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ohf-error) 18%, transparent); }
.ohf-form__summary { margin: 0 0 8px; padding: 16px 18px; border-left: 4px solid var(--ohf-error); border-radius: 0 10px 10px 0; background: var(--ohf-tint-2); color: var(--ohf-text); font-size: 14.5px; }
.ohf-form__summary p { margin: 0 0 6px; font-weight: 700; color: var(--ohf-ink); }
.ohf-form__summary ul { margin: 0; padding-left: 18px; }
.ohf-form__summary a { color: var(--ohf-error); text-decoration: underline; }
/* Simple arithmetic question + "new question" button */
.ohf-captcha__row { display: flex; gap: 10px; }
.ohf-captcha__row input { flex: 1; min-width: 0; }
.ohf-form .ohf-captcha__new { flex: none; width: auto; margin: 0; padding: 0 16px; border: 1px solid var(--ohf-line-strong); border-radius: 10px; background: var(--ohf-surface); color: var(--ohf-ink); font: 600 13.5px/1 "Montserrat", sans-serif; cursor: pointer; }
.ohf-form .ohf-captcha__new:hover { border-color: var(--ohf-ochre); }
/* Honeypot field: hidden from people, filled in by bots. */
.ohf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ohf-form button[type="submit"] { width: 100%; margin-top: 26px; border: 0; cursor: pointer; gap: 8px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.ohf-contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ohf-contact-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 14px; background: var(--ohf-beige); }
.ohf-contact-card svg { flex: none; color: var(--ohf-ochre-dark); }
.ohf-contact-card div { min-width: 0; }
.ohf-contact-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.ohf-contact-card p { margin: 0 0 8px; color: var(--ohf-muted); font-size: 14.5px; }
.ohf-contact-card a { color: var(--ohf-ochre-dark); font-size: 14px; font-weight: 600; overflow-wrap: break-word; }
.ohf-contact-note { margin-top: 40px; }
.ohf-contact-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.ohf-contact-social a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ohf-surface); color: var(--ohf-ink); font: 600 14px/1 "Montserrat", sans-serif; text-decoration: none; }
.ohf-contact-social a:hover { color: var(--ohf-ochre-dark); }
.ohf-contact-social svg { width: 18px; height: 18px; }

/* ==========================================================================
   Home page
   ========================================================================== */

/* ---------- Hero: full-height photo, text on the left ---------- */
.ohf-home-hero { position: relative; display: flex; align-items: center; min-height: min(100vh, 860px); overflow: hidden; background: #d9c3a5; }
.ohf-home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ohf-home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(70, 42, 18, 0.62) 0%, rgba(70, 42, 18, 0.35) 45%, rgba(70, 42, 18, 0) 75%); }
.ohf-home-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 80px; padding-bottom: 80px; }
.ohf-home-hero__text { max-width: 560px; text-align: center; }
.ohf-home-hero h1 { margin: 0 0 22px; color: var(--ohf-sand); font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(40, 22, 8, 0.35); }
.ohf-home-hero p { margin: 0; color: #fff; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; text-shadow: 0 1px 10px rgba(40, 22, 8, 0.45); }

/* ---------- Section heading + three-up cards ---------- */
.ohf-home-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.ohf-home-head h2 { color: var(--ohf-accent-lg); font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; letter-spacing: -0.01em; }
.ohf-home-head p { margin: 14px 0 0; color: var(--ohf-muted); font-size: 17px; }
.ohf-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ohf-home-card h3 { margin: 22px 0 10px; font-size: 21px; font-weight: 800; }
.ohf-home-card h3 a { color: var(--ohf-ink); text-decoration: none; }
.ohf-home-card h3 a:hover { color: var(--ohf-ochre-dark); }
.ohf-home-card p { margin: 0; color: var(--ohf-muted); font-size: 15px; line-height: 1.7; }
.ohf-home-card__media { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2; background: var(--ohf-beige); }
.ohf-home-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
a.ohf-home-card__media:hover img { transform: scale(1.04); }
/* Card showing a big number instead of an image */
.ohf-home-card--stat .ohf-stat { margin: 20px 0 0; color: var(--ohf-accent-lg); font: 800 40px/1 "Montserrat", sans-serif; }
.ohf-home-card--stat h3 { margin-top: 8px; }

/* ---------- Project cards and partner logos ---------- */
.ohf-home-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.ohf-home-project { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--ohf-surface); box-shadow: var(--ohf-shadow-lg); }
.ohf-home-project__media { aspect-ratio: 2 / 1; overflow: hidden; background: var(--ohf-beige); }
.ohf-home-project__media img { width: 100%; height: 100%; object-fit: cover; }
.ohf-home-project__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px 30px 32px; }
.ohf-home-project__body h3 { font-size: 22px; font-weight: 800; }
.ohf-home-project__body p { flex: 1; margin: 10px 0 22px; color: var(--ohf-muted); font-size: 15px; line-height: 1.7; }
.ohf-home-partners { padding-top: 0; }
.ohf-home-partners ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 72px; margin: 0; padding: 0; list-style: none; }
.ohf-home-partners img { display: block; width: auto; max-width: 200px; max-height: 110px; }

/* ==========================================================================
   About page
   ========================================================================== */
.ohf-about-intro { padding: 72px 0 88px; }
.ohf-about-intro h1 { margin: 6px 0 20px; font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.ohf-about-intro .ohf-lede { font-size: 19px; color: var(--ohf-text); }
.ohf-about-intro__art img { display: block; width: 100%; height: auto; }

/* ---------- Vision card ---------- */
.ohf-mv__title { margin: 0 0 24px; color: var(--ohf-ink); font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.ohf-mv__card { padding: 44px 44px 48px; border-radius: 20px; background: var(--ohf-surface); border-top: 4px solid var(--ohf-ochre); box-shadow: var(--ohf-shadow-lg); }
.ohf-mv__card--dark { background: var(--ohf-night); border-top-color: var(--ohf-sand); text-align: center; }
.ohf-mv__card--dark .ohf-mv__text { max-width: 760px; margin-left: auto; margin-right: auto; }
.ohf-mv__text { margin: 10px 0 0; color: var(--ohf-ink); font: 700 clamp(21px, 2.2vw, 27px)/1.4 "Montserrat", sans-serif; }
.ohf-mv__card--dark .ohf-mv__text { color: #fff; }

/* ---------- Objectives, team, quotes ---------- */
.ohf-objectives { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ohf-objectives li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; background: var(--ohf-beige); color: var(--ohf-ink); font: 600 15.5px/1.45 "Montserrat", sans-serif; }
.ohf-objectives svg { flex: none; color: var(--ohf-ochre-dark); }
.ohf-team__group + .ohf-team__group { margin-top: 48px; }
.ohf-team__group h3 { margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--ohf-line); color: var(--ohf-ochre-dark); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ohf-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.ohf-person { text-align: center; }
.ohf-person__face { display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto 14px; overflow: hidden; border: 4px solid var(--ohf-surface); border-radius: 50%; background: linear-gradient(135deg, var(--ohf-sand), var(--ohf-ochre)); box-shadow: var(--ohf-shadow-sm); }
.ohf-person__face img { width: 100%; height: 100%; object-fit: cover; }
/* Initials shown when there is no photo */
.ohf-person__face span { color: #1c1915; font: 800 38px/1 "Montserrat", sans-serif; letter-spacing: 0.04em; }
.ohf-person h4 { margin: 0; color: var(--ohf-ink); font-size: 16.5px; font-weight: 700; }
/* Masonry-style quotes using CSS columns */
.ohf-quotes { columns: 3 300px; column-gap: 24px; }
.ohf-quote { break-inside: avoid; margin: 0 0 24px; padding: 30px 28px 26px; border-radius: 18px; background: var(--ohf-beige); }
.ohf-quote blockquote { position: relative; margin: 0 0 20px; padding-top: 30px; color: var(--ohf-text); font: italic 400 17px/1.65 "PT Serif", Georgia, serif; }
.ohf-quote blockquote::before { content: "\201C"; position: absolute; top: -14px; left: -2px; color: var(--ohf-accent-lg); font: 800 64px/1 "Montserrat", sans-serif; }
.ohf-quote figcaption { color: var(--ohf-muted); font-size: 13.5px; }
.ohf-quote strong { display: block; color: var(--ohf-ink); font: 700 15px/1.4 "Montserrat", sans-serif; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.ohf-campaigns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ohf-split, .ohf-split--wide-text, .ohf-volunteer { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.ohf-split__art, .ohf-form { position: static; }
	.ohf-split__art { max-width: 420px; }
	.ohf-home-grid, .ohf-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.ohf-hero { min-height: 520px; }
	.ohf-hero::after { background: linear-gradient(0deg, rgba(20, 16, 12, 0.88) 0%, rgba(20, 16, 12, 0.45) 60%, rgba(20, 16, 12, 0.3) 100%); }
	.ohf-hero__inner { padding-bottom: 56px; }
	.ohf-hero__credit { max-width: 90%; left: 16px; text-align: left; }
	.ohf-section { padding: 64px 0; }
	.ohf-features { padding-top: 48px; padding-bottom: 64px; gap: 64px; }
	.ohf-feature { grid-template-columns: 1fr; gap: 36px; }
	.ohf-feature--flip .ohf-feature__media { order: 0; }
	.ohf-feature__media::before,
	.ohf-feature--flip .ohf-feature__media::before { inset: 14px -10px -14px 14px; }
	.ohf-campaigns { grid-template-columns: 1fr; }
	.ohf-areas { grid-template-columns: minmax(0, 1fr); }
	.ohf-form { padding: 28px 22px; }
	.ohf-cta__inner { padding-top: 48px; padding-bottom: 48px; }
	.ohf-pull { font-size: 19px; }
	.ohf-home-hero { min-height: 560px; }
	.ohf-home-hero::after { background: linear-gradient(0deg, rgba(60, 36, 16, 0.75) 0%, rgba(60, 36, 16, 0.4) 100%); }
	.ohf-home-hero__text { margin: 0 auto; }
	.ohf-home-grid, .ohf-home-projects, .ohf-contact-cards { grid-template-columns: minmax(0, 1fr); }
	.ohf-about-intro { padding: 40px 0 56px; }
	.ohf-mv__card { padding: 32px 26px 36px; }
	.ohf-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
	.ohf-person__face { width: 112px; height: 112px; }
	.ohf-home-project__body { padding: 24px 22px 28px; }
	.ohf-home-partners ul { gap: 28px 40px; }
	.ohf-home-partners img { max-width: 150px; }
}
/* ==========================================================================
   Reduced motion: no hover lift / zoom
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ohf-tile:hover { transform: none; }
	a.ohf-home-card__media:hover img { transform: none; }
}

/* ==========================================================================
   Dark mode tweaks
   ========================================================================== */
/* Same two cases as the dark tokens in site-chrome.css: explicit toggle,
   then OS preference. Keep both lists in sync. Partner logos get a light
   plate so dark logo artwork stays visible. */
:root[data-theme="dark"] .ohf-mv__card--dark { border: 1px solid var(--ohf-line); border-top: 4px solid var(--ohf-sand); }
:root[data-theme="dark"] .ohf-home-partners img { background: #f4efe9; padding: 10px 14px; border-radius: 12px; }
:root[data-theme="dark"] .ohf-about-intro__art img { border-radius: 16px; }
:root[data-theme="dark"] .ohf-campaign__icon { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ohf-mv__card--dark { border: 1px solid var(--ohf-line); border-top: 4px solid var(--ohf-sand); }
	:root:not([data-theme="light"]) .ohf-home-partners img { background: #f4efe9; padding: 10px 14px; border-radius: 12px; }
	:root:not([data-theme="light"]) .ohf-about-intro__art img { border-radius: 16px; }
	:root:not([data-theme="light"]) .ohf-campaign__icon { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
}