/*
 * DLF site styles — design tokens + component patterns captured live from
 * dalailamafellows.com (2026-07-17), NOT the rejected fellows-landing.html
 * mockup. See docs/MIGRATION-PLAN.md §3 and memory dlf-ui-fidelity-preference.
 *
 * Fonts: Futura PT (titles) / Proxima Nova (body) — the real Adobe Fonts kit
 * (Than's Creative Cloud account, enqueued in functions.php), same as the
 * live site, not a substitute.
 *
 * Pruned 2026-07-21 for the Kadence child-theme conversion (Sprint K1): the
 * site header/nav is now Kadence's Header Builder + Global Styles, not this
 * file — its CSS (and old markup classes) has been removed. Font-family
 * assignment (body/headings) stays here on purpose: Kadence's Customizer
 * can't reference the Adobe Fonts kit, so the base element resets below are
 * still doing real work, not just legacy chrome. The footer is Kadence's
 * Footer Builder for placement/mechanism, but the visible footer markup is
 * still a Custom HTML widget reusing the `.dlf-footer-*` classes below —
 * that section stays. See docs/decision-kadence-child-theme.md.
 *
 * Updated 2026-07-22 for Sprint K2 step 4: the homepage's two full-bleed
 * content photos are now Kadence Row Layout + Image blocks (not raw HTML) —
 * the `.dlf-content-photo`/`--parallax` rules below are unchanged in
 * purpose but their `height`/`top` are now `vh`-based, not `%`, because a
 * Kadence Row Layout's Column wrapper puts its own `position: relative`
 * ancestor between the classed row and the `<img>`, breaking the old
 * percentage reference-frame math. Full writeup: docs/
 * full-width-parallax-hero.md §4.
 *
 * ---------------------------------------------------------------------------
 * QUICK INDEX — search for the "---- Name ----" banner to jump to a section.
 * Each entry also lists which template(s)/page(s) actually render it, so you
 * can go straight to the right block instead of reading the whole file.
 * ---------------------------------------------------------------------------
 *   Design tokens (:root)          design vars used everywhere below
 *   Base element resets            *, body, strong/b, h1-h4, a, img (all pages)
 *   Plain page fallback wrapper    page.php (the 6 static content pages)
 *   Footer                         Custom HTML widget in Footer 1 (every page)
 *   Homepage hero                  front-page.php chrome (title/image from
 *                                    the "Reimagine Leadership" Page, see below)
 *   Mission section                Homepage ("Reimagine Leadership" Page)
 *                                    post_content only
 *   Full-bleed content photo       Homepage post_content only -- editor-
 *                                    managed Kadence Row Layout + Image
 *                                    blocks (add class dlf-content-photo,
 *                                    +--parallax for drift; see docs/
 *                                    full-width-parallax-hero.md §4)
 *   Pull-quote                     Homepage post_content only
 *   Outlined pill button           Homepage post_content ("Our Approach" button)
 *   Fellows archive + modal        archive-fellow.php, taxonomy.php
 *   Single-fellow profile page     single-fellow.php
 *   Plain content page typography  page.php post_content (h2/h3/p/ul/etc.)
 *   Mid-page full-bleed section    page.php post_content, e.g. About's
 *     hero + parallax                "Our Origin" (see docs/full-width-
 *                                    parallax-hero.md for the full mechanics)
 *   Core-values icon row           About page post_content only
 *   Team / community-fellow grid   About page post_content only
 *   Page photo figure              any page.php post_content with an <img>
 *   External links row             page.php post_content (e.g. Apply page)
 *   FAQ accordion                  Apply page post_content only
 *   Mobile breakpoint (700px)      overrides for several sections above
 * ---------------------------------------------------------------------------
 */

/* ---- Design tokens ---- */
/* Central place for colors/fonts/spacing reused across every section below.
   Change a value here to re-theme the whole site at once. */
:root {
	--dlf-font-heading: futura-pt, sans-serif;
	--dlf-font-body: proxima-nova, sans-serif;
	--dlf-text: #363636;
	--dlf-heading-color: #16161d;
	--dlf-muted: #767676;
	--dlf-bg: #ffffff;
	--dlf-rule: #e2e2e2;
	--dlf-max-width: 1100px;
}

/* ---- Base element resets ---- */
/* Applies everywhere; edit with care since these cascade into every section
   below (most sections only override the specific parts that need to differ
   from these defaults). */

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	/* clip, NOT hidden: both keep 100vw full-bleed breakouts
	   (.dlf-section-hero etc.) from spawning a horizontal scrollbar, but
	   `overflow-x: hidden` forces overflow-y to compute to `auto`, turning
	   <body> into a (non-scrolling) scroll container -- which inactivates
	   every root-relative scroll-driven animation on the site (their
	   ViewTimeline.currentTime goes null and the drift freezes). `clip`
	   clips identically without establishing a scroll container, so the
	   view()/named-timeline drifts keep working. Same clip-vs-hidden gotcha
	   documented on .dlf-section-hero below. */
	overflow-x: clip;
	font-family: var(--dlf-font-body);
	font-weight: 300; /* body copy is intentionally light -- matches the live site */
	font-size: 18px;
	line-height: 1.8;
	/* Matches the live site, which declares letter-spacing:.015em on <body>;
	   at the 18px body size that computes to 0.27px, cascading to paragraphs
	   and list items. Components that need different tracking (hero titles,
	   uppercase labels) set their own explicitly and are unaffected. */
	letter-spacing: 0.015em;
	color: var(--dlf-text);
	background: var(--dlf-bg);
}

/* The UA default `strong{font-weight:bolder}` resolves relative to the
   inherited weight, and CSS's bolder-mapping table sends 300 -> 400, not
   700 -- so inline <strong> in body copy (weight 300) renders barely
   distinguishable from regular text unless pinned explicitly. */
strong, b {
	font-weight: 700;
}

/* Headings default to Futura PT bold everywhere; individual sections below
   override text-transform/size/etc. per component as needed. */
h1, h2, h3, h4 {
	font-family: var(--dlf-font-heading);
	font-weight: 700;
	color: var(--dlf-heading-color);
	line-height: 1.2;
}

h2 {
	text-align: center;
	text-transform: uppercase;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- Plain page fallback wrapper ---- */
/* page.php: the max-width column that all 6 static pages' post_content
   renders inside, below their photo hero. Typography for what's inside
   this wrapper is defined further down in "Plain content page typography". */

.dlf-plain-page__inner {
	max-width: 1008px;
	margin: 0 auto;
	padding: 4rem 1.5rem 6rem;
}

/* ---- Footer ---- */
/* parts/footer.php, included on every page: "back to top" link, social
   icons, a 2-column link list, and partner-logo strip. */

.dlf-site-footer {
	text-align: center;
	padding: 3rem 1.5rem 4rem;
}

.dlf-footer-top {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dlf-text);
	margin-bottom: 2rem;
}

.dlf-footer-top__chevron {
	font-size: 1.1rem;
}

.dlf-footer-social {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.dlf-footer-social a {
	color: var(--dlf-heading-color);
}

.dlf-footer-rule {
	max-width: var(--dlf-max-width);
	margin: 0 auto 2.5rem;
	border: none;
	border-top: 1px solid var(--dlf-rule);
}

.dlf-footer-columns {
	max-width: var(--dlf-max-width);
	margin: 0 auto 3rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 260px));
	justify-content: center; /* center the two tracks within the (now full-width) footer -- without this they pack to the left */
	gap: 2.5rem;
	text-align: left;
}

.dlf-footer-col strong {
	display: block;
	font-family: var(--dlf-font-body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--dlf-heading-color);
	margin-bottom: 0.75rem;
}

.dlf-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlf-footer-col li {
	margin-bottom: 0.4rem;
}

.dlf-footer-col a {
	font-size: 1rem;
	text-decoration: underline;
	color: var(--dlf-text);
}

.dlf-footer-logos {
	display: flex;
	justify-content: center;
}

.dlf-footer-logos img {
	max-width: 800px; /* the source (boulder-csc-logos.png) is 800x300 -- show it at native size, matching the live site */
	width: 100%;
	height: auto;
}

/* Let the DLF footer use the full footer width.
   The entire footer is a single Custom HTML widget that Kadence places in the
   footer's MIDDLE row. Depending on how that row's columns are configured (a
   Kadence theme_mod that differs per environment -- e.g. 3 equal columns with
   the widget in the middle on local, but a single column on the dev server),
   the row is a CSS grid that can box the widget into a fraction of the width --
   which capped the logo lockup at ~394px.

   Two environment-independent rules fix it:
     1. Collapse the row to ONE full-width track (overriding Kadence's
        per-breakpoint grid-template-columns in one place -- hence !important).
        With a single track, whichever section holds the widget fills the row.
     2. Hide only genuinely EMPTY sections, keyed to Kadence's
        `footer-section-inner-items-0` marker -- NOT by section number. (An
        earlier version hid sections 1 and 3 by number; that worked on local,
        where the widget sat in section 2, but HID THE WHOLE FOOTER on the dev
        server, where the widget sits in section 1.) */
.site-middle-footer-inner-wrap.site-footer-row {
	grid-template-columns: minmax(0, 1fr) !important;
}
.site-middle-footer-inner-wrap .site-footer-section.footer-section-inner-items-0 {
	display: none;
}

/* ---- Homepage hero (accessible sticky + scroll-driven drift, Spike E) ---- */
/* front-page.php's chrome around the editable "Reimagine Leadership" Page
   (Settings > Reading > homepage) -- the hero title and image come from
   that Page's title/featured image, everything below the hero is that
   Page's own post_content (see the Mission/Full-bleed-photo/Pull-quote
   sections further down). Full-viewport sticky photo hero that stays
   pinned while the page scrolls, then releases as the content panel rides
   up over it. See docs/full-width-parallax-hero.md for the full
   explanation of how this differs from the mid-page ".dlf-section-hero"
   pattern further down. */

/* Bounds the sticky hero's "stuck" range to exactly hero+panel's own height,
   so it releases cleanly right as the panel ends instead of staying stuck
   (and peeking through) into whatever comes after — see front-page.php. */
.dlf-hero-scroll {
	position: relative;
}

.dlf-hero {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: #222;
	display: grid;
	place-items: center;
	text-align: center;
}

/* Full-height sticky hero with scroll-driven drift — homepage only. */
.dlf-hero--home {
	position: sticky;
	top: 0;
	height: 100vh;
}

/* The 118%-tall image box (see .dlf-hero__img) defaults to object-position
   50% 50%, but how much of the source photo that centering crops off the
   top depends on the viewport's aspect ratio — wider/shorter screens (e.g.
   a 16:9 Windows laptop) zoom the cover-fit in more than a MacBook's 16:10
   panel, clipping the fellows' heads at the top of the photo. Anchoring
   fully to the top (same pattern as .dlf-hero--banner below) keeps heads
   intact across aspect ratios and lets the bottom of the photo (floor/rugs)
   take the crop instead. */
.dlf-hero--home .dlf-hero__img {
	object-position: 50% 0%;
}

/* Short static banner — fellows archive / single-fellow pages. */
.dlf-hero--page {
	height: 320px;
}

/* Donate + Contact page banners (page.php short-hero branch). A touch taller
   than the fellows banner, and TOP-anchored: Than's recropped hero images
   (hero-donate-cropped.jpg / hero-contact-us-cropped.jpg, 2411x1067, subjects
   framed toward the top) show their top edge, letting the bottom crop off
   rather than the people. Height scales with viewport but is capped so it
   stays a "regular" banner, not a full-screen hero. */
.dlf-hero--banner {
	height: clamp(320px, 34vw, 460px);
}
.dlf-hero--banner .dlf-hero__img {
	height: 100%;          /* no drift headroom — this banner is static */
	object-position: top;  /* keep the top of the photo; crop the bottom */
}

/* Contact banner only: nudge the crop window 15% down the photo (past the
   wall/ceiling above the group's heads) so the heads sit nearer the top and
   the front row's legs aren't cropped as hard. 15% was tuned by eye against
   this specific image; raise it to push heads higher, lower it toward the top.
   Donate stays top-anchored (no override). */
.dlf-hero--banner-contact-us .dlf-hero__img {
	object-position: 50% 15%;
}

.dlf-hero__img {
	position: absolute;
	inset: 0; /* top: 0 -- box is top-aligned at rest, all 18% overflow hangs below (see the drift keyframes for why) */
	width: 100%;
	height: 118%; /* headroom for the drift animation below, so it never exposes an empty edge */
	object-fit: cover;
	z-index: -1;
}

.dlf-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Light darkening tint so white title text stays legible over any photo.
	   The live SquareSpace site has an equivalent (a flat rgba(46,46,46,0.3)
	   "Image Overlay" site style on every banner image). Lowered from
	   .35/.2/.45 in Aug 2026 — stakeholders asked for brighter hero photos,
	   and the brighter value was kept site-wide rather than homepage-only. */
	/* old background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.1) 45%, rgba(0,0,0,.25));*/
	background: rgba(46,46,46,.3);
	pointer-events: none;
}

/* Big uppercase page/post title overlaid on the hero photo (e.g. "REIMAGINE
   LEADERSHIP" on the homepage, or each static page's own title). */
.dlf-hero__title {
	position: relative;
	z-index: 1; /* make the title on top of overlay */
	color: #fff;
	font-family: var(--dlf-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	/* 3.0625rem (49px) matches the live site's page-title hero text at
	   desktop widths; scales down via vw on narrow viewports since the live
	   site's own mobile behavior wasn't captured/reproduced 1:1 here. */
	font-size: clamp(1.75rem, 3.2vw, 3.0625rem);
	letter-spacing: normal;
	white-space: nowrap;
	line-height: 1.1;
	margin: 0;
	text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Homepage scroll cue (front-page.php): a chevron that swaps to a "SCROLL
   DOWN" label on hover, mirroring the live site's `.scroll-arrow`. Live's box
   is 150x30 at bottom:24px with a 32px icon, and the label is proxima-nova
   12px / 2px tracking -- reproduced here, except live's is black
   (.color-weight-light) and ours stays white over the photo.

   The chevron lives in ::before rather than in the markup so :hover can swap
   the two, exactly as live does (`:hover:before {display:none}` +
   `:hover span {display:block}`). The 150px width is what gives the label room
   to sit on one line without shifting the cue off-centre.

   z-index: 1 for the same reason as .dlf-hero__title above -- .dlf-hero::after
   is the hero's last child, so without it the overlay paints over the cue. */
.dlf-hero__cue {
	position: absolute;
	z-index: 1;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: 30px;
	text-align: center;
	color: #fff;
	opacity: 0.85;
}

.dlf-hero__cue::before {
	content: '\2304'; /* the same U+2304 arrowhead the markup used to carry */
	display: inline-block;
	vertical-align: middle;
	font-size: 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
}

.dlf-hero__cue-label {
	display: none;
	font-family: var(--dlf-font-body); /* proxima-nova, same as live */
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 30px;
	text-transform: uppercase;
}

.dlf-hero__cue:hover::before {
	display: none;
}

.dlf-hero__cue:hover .dlf-hero__cue-label {
	display: block;
}

/* Drift animation for .dlf-hero--home only, tied to root scroll position
   since this hero always starts at scroll offset 0 (see docs/full-width-
   parallax-hero.md for why the mid-page section-hero can't use this same
   `scroll(root)` approach).

   Starts at translateY(0) -- with .dlf-hero__img now top-aligned at rest
   (see its own rule above), this shows the true top edge of the
   object-fit: cover crop, no cropping and no gap, on initial load. Ends at
   translateY(-14.5%) to reveal more of the bottom as you scroll away.

   Gotcha: `translateY(%)` and `top: %` do NOT share a reference frame --
   `top` resolves against the *containing block* (.dlf-hero, 100% height),
   but `transform: translateY(%)` resolves against the *element's own*
   border box (.dlf-hero__img, 118% height). An earlier version of this
   rule paired a static `top: -9%` with `translateY(9%)`, assuming those
   would cancel out; they don't (9% of 118%-height != 9% of 100%-height),
   so the drift overshot and exposed .dlf-hero's #222 background as a
   visible gap at the top of the hero, shrinking away as the animation
   progressed back toward 0. Keeping the base position at a plain `top: 0`
   and doing 100% of the movement through one `transform`, in one
   reference frame, avoids the mismatch entirely -- -14.5% here is safely
   inside the box's 18%-of-container overflow budget (calc: 18% container
   / 1.18 box-height-ratio ≈ 15.25% max; -14.5% leaves a small margin). */
@supports (animation-timeline: scroll()) {
	@keyframes dlf-hero-drift {
		from { transform: translateY(0); }
		to   { transform: translateY(-14.5%); }
	}
	.dlf-hero--home .dlf-hero__img {
		animation: dlf-hero-drift linear both;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlf-hero--home .dlf-hero__img {
		animation: none;
		transform: none; /* base top:0 + no transform = the same top-aligned, uncropped rest position as the animation's `from` */
	}
}

/* About page: hero framed to match the live site exactly.
   ---------------------------------------------------------------------------
   The About hero photo read as noticeably more zoomed/cropped than the same
   shot on the live site (dalailamafellows.com/about). It is NOT an aspect-ratio
   mismatch -- both sources are ~2.97:1. The cause is the drift headroom itself:
   `object-fit: cover` scales to fill the image box's FULL height, so the shared
   118%-tall box is scaled exactly 18% more than the live site's plain 100%-tall
   one. Zoom is therefore directly proportional to the height below -- that one
   number IS the zoom dial, and `100%` here is the exact live-site match.

   Why the drift below still works at 100%, with NO headroom left:
   `translateY(-8.5%)` does slide the image up off its box, opening an 8.5%-tall
   strip of .dlf-hero's #222 background at the BOTTOM of the hero -- but on a
   sticky --home hero that strip is never visible. .dlf-front-panel is opaque
   (background: var(--dlf-bg)) at z-index 1 and rides up over the hero at
   z-index 0, and it always covers more than the gap opens: at scroll distance
   S the panel covers the bottom S of the hero while the gap is only 0.085 x S
   tall, so the panel outruns it at every scroll position. Net result: live-exact
   framing at rest AND a real parallax drift, the drift just borrowing its travel
   from the panel-covered region instead of from zoom headroom.

   Retuning caveats, in order of how easily they bite:
     - This only holds for sticky --home heroes with a panel scrolling over
       them. On a static banner (.dlf-hero--banner) the same pairing WOULD
       expose a visible #222 strip -- there, keep translate inside the headroom.
     - Raising the height above 100% re-introduces zoom at 1:1 (110% = 10% more
       zoomed than live). Only do it if more drift travel is worth the zoom.
     - Deepening the drift past roughly -1/12 of the panel's scroll-in rate
       would let the gap outrun the panel; -8.5% is nowhere near that bound.

   Scoped to the per-page class from page.php so the homepage's own hero keeps
   the full-amplitude drift it was tuned for. */
.dlf-hero--home-about .dlf-hero__img {
	height: 100%;
}

@supports (animation-timeline: scroll()) {
	@keyframes dlf-hero-drift-about {
		from { transform: translateY(0); }
		to   { transform: translateY(-8.5%); }
	}

	/* Same specificity as the shared .dlf-hero--home rule, so this must stay
	   AFTER it in source order to win. Only the name is swapped -- timeline,
	   range and easing are inherited from that rule's shorthand. */
	.dlf-hero--home-about .dlf-hero__img {
		animation-name: dlf-hero-drift-about;
	}
}

/* Content panel rides up over the sticky hero */
.dlf-front-panel {
	position: relative;
	z-index: 1;
	background: var(--dlf-bg);
	box-shadow: 0 -30px 60px rgba(0,0,0,.15);
}

/* Donate + Contact (page.php short-banner branch): the content sits flush
   BELOW a static .dlf-hero--page banner rather than riding up over a sticky
   hero, so drop the overlap shadow that would otherwise smudge the banner's
   bottom edge. */
.dlf-front-panel--flat {
	box-shadow: none;
}

/* ---- Mission section ---- */
/* Homepage post_content only ("Reimagine Leadership" Page, wp-admin
   editable): the centered "mission statement" paragraph block directly
   below the homepage hero. */

.dlf-mission {
	padding: 5rem 1.5rem;
}

.dlf-mission__inner {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.dlf-mission__inner h2 {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.dlf-mission__inner p {
	text-align: left;
	margin: 0 0 1.25rem;
}

/* ---- Full-bleed content photo ---- */
/* Homepage post_content only: a plain full-width photo band used between
   homepage sections (not to be confused with the parallax
   ".dlf-section-hero" or the homepage's own sticky ".dlf-hero" -- this one
   is static, no title overlay). Works full-bleed here because
   front-page.php renders post_content directly inside .dlf-front-panel,
   deliberately NOT wrapped in the width-constrained
   .dlf-plain-page__inner the other pages use. */

.dlf-content-photo img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
	object-position: top;
}

/* Opt-in scroll-driven drift for any .dlf-content-photo -- add the class
   `dlf-content-photo--parallax` alongside `dlf-content-photo` in
   post_content (wp-admin Custom HTML block) and it animates, no template/
   CSS change needed for the next photo. Exact same mechanism (and the same
   overflow:clip/percentage-reference-frame gotchas -- see the comment on
   .dlf-section-hero above and docs/full-width-parallax-hero.md) as the
   About page's "Our Origin" section-hero, just reused here. Unlike the
   plain (non-parallax) rule above, this needs a *definite* height on the
   container to absolutely-position the oversized image against, so it's
   fixed at 70vh rather than the plain version's aspect-ratio-derived,
   max-height-capped height. */
.dlf-content-photo.dlf-content-photo--parallax {
	position: relative;
	height: 70vh;
	overflow: clip;
}

.dlf-content-photo.dlf-content-photo--parallax img {
	position: absolute;
	inset: 0;
	width: 100%;
	/* height/top are vh-based, not %, because inside a Kadence Row Layout
	   block the img's containing block (its nearest positioned ancestor)
	   is Kadence's own auto-height .kt-inside-inner-col wrapper, not this
	   element -- percentages here would resolve against that tiny box
	   instead of the intended 70vh. vh sidesteps the containing block
	   entirely. Values are 136%/-18% of the 70vh above (roughly double the
	   headroom of the matching .dlf-section-hero rule's 118%/-9%, to budget
	   for the doubled drift amplitude below). */
	height: 95.2vh; /* headroom for the drift animation below, so it never exposes an empty edge */
	max-height: none;
	top: -12.6vh;
	object-fit: cover;
}

@supports (animation-timeline: view()) {
	/* ∓12% here, not ∓18%: this transform is relative to the img's own
	   136%-tall box, so ∓18% in the box's own terms would be ∓24.5% of the
	   container, overshooting the ∓18% headroom above. ∓12% (≈∓16.3%
	   container-relative) stays safely inside that budget -- same margin
	   ratio as the original ∓7%/118%/-9% design, just scaled ~2x for more
	   noticeable motion. */
	@keyframes dlf-content-photo-drift {
		from { transform: translateY(-12%); }
		to   { transform: translateY(12%); }
	}
	.dlf-content-photo.dlf-content-photo--parallax img {
		animation: dlf-content-photo-drift linear both;
		animation-timeline: view();
		animation-range: cover;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlf-content-photo.dlf-content-photo--parallax img {
		animation: none;
		transform: none;
	}
}

/* ---- Silhouette photo: fixed-background reveal (matches the live SquareSpace
   site's effect, confirmed by inspecting it directly) ---- */
/* What the live site actually does (verified in the DOM): the photo is held
   *stationary relative to the viewport* the whole time the section is on
   screen, while the section's own box scrolls up over it like a window --
   so a different horizontal slice of the (viewport-anchored) image is
   revealed as you scroll. The image never moves; only which part shows
   through the window changes. On squarespace this is JS + `position: fixed`.

   The pure-CSS name for exactly this is `background-attachment: fixed`: the
   background is positioned against the viewport, not the element, and only
   the part inside the element's box paints. An earlier attempt used
   `position: sticky` instead, but sticky gives a "scroll in -> pin at top
   -> scroll out" motion where the *same* crop shows during the pin -- Than
   correctly flagged that as wrong ("just sticks to the top then moves on").
   background-attachment:fixed has no pin/release phases at all, which is the
   whole point.

   Editor-manageability: background-attachment:fixed needs the image as a CSS
   *background*, but this photo is an editor-managed Kadence Image block
   (an <img>), and we won't hardcode a URL that silently goes stale if the
   editor swaps the photo (see docs/.../editor-self-service-principle). So a
   tiny front-page script (functions.php -> homepage-parallax.js) copies the
   <img>'s own src into the `--dlf-silhouette-bg` custom property and adds the
   `.is-fixed-bg` class. Progressive enhancement: with no JS (or before the
   image loads) the class is absent and the plain <img> below just renders as
   an ordinary full-bleed band -- never a blank gap. */
.dlf-content-photo.dlf-content-photo--silhouette img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
	object-position: center;
	animation: none; /* cancels the shared --parallax drift keyframes */
}

/* Enhanced state (added by JS once the img src is known): swap the <img> for
   a viewport-fixed background on the Kadence column wrapper, which is the
   visible window. Height 70vh matches the plain band above for consistency. */
.dlf-content-photo.dlf-content-photo--silhouette.is-fixed-bg .kt-inside-inner-col {
	height: 70vh;
	background-image: var(--dlf-silhouette-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.dlf-content-photo.dlf-content-photo--silhouette.is-fixed-bg img {
	display: none;
}

/* Reduced motion: a fixed background is scroll-linked parallax, so pin the
   background to normal scroll -- the photo still shows, just without the
   viewport-anchored reveal. (iOS Safari also silently falls back to `scroll`
   since it doesn't support fixed attachment -- same graceful result.) */
@media (prefers-reduced-motion: reduce) {
	.dlf-content-photo.dlf-content-photo--silhouette.is-fixed-bg .kt-inside-inner-col {
		background-attachment: scroll;
	}
}

/* ---- Pull-quote ---- */
/* Homepage post_content only: the centered italic testimonial-style quote block. */

.dlf-quote {
	max-width: 780px;
	margin: 0 auto;
	padding: 4rem 1.5rem;
	text-align: center;
}

.dlf-quote blockquote {
	margin: 0 0 1rem;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.7;
}

.dlf-quote__attr {
	text-align: right;
	margin: 0 0 2.5rem;
	color: var(--dlf-muted);
}

/* ---- Outlined pill button (matches the live site's "Our Approach" button) ---- */
/* Homepage post_content only, but reusable in any page's post_content --
   just add class="dlf-btn-pill" to a link. */

.dlf-btn-pill {
	display: inline-block;
	font-family: var(--dlf-font-body);
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: underline;
	color: var(--dlf-heading-color);
	background: transparent;
	border: 2px solid var(--dlf-heading-color);
	border-radius: 999px;
	padding: 1rem 2rem;
	transition: background 0.2s, color 0.2s;
}

.dlf-btn-pill:hover {
	background: var(--dlf-heading-color);
	color: #fff;
}

/* ---- Fellows archive: facet bar + card grid + modal ---- */
/* archive-fellow.php (the /fellows/ directory) and taxonomy.php (year/
   region/country fallback listing pages). Client-side facet filtering (JS
   fetches the custom /wp-json/dlf/v1/fellows endpoint once, filters in the
   browser -- see mu-plugins/dlf-rest.php) plus a click-to-open modal with
   each fellow's full bio, styled to match the live site's card-click
   overlay. */

.dlf-archive-main {
	max-width: var(--dlf-max-width);
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

/* "Class" / "Region" / "Country" native <select> filters above the grid */
.dlf-facet-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.dlf-facet {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.dlf-facet label {
	font-weight: 700;
	color: var(--dlf-heading-color);
}

.dlf-facet select {
	font-family: var(--dlf-font-body);
	font-size: 1rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid #999;
	background: #fff;
	color: var(--dlf-text);
	min-width: 160px;
}

/* The card grid itself -- one card per fellow, headshot + name + year */
.dlf-fellow-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.75rem;
}

/* The whole clickable card is one <a>: a white tile with a soft drop shadow
   and a centered caption, matching the live site's summary cards. The image
   sits flush to the tile's top/left/right edges; name + year are centered
   below with bottom padding. */
.dlf-fellow-card {
	display: block;
	position: relative; /* positioning context for the country overlay */
	text-decoration: none;
	color: var(--dlf-text);
	cursor: pointer;
	background: #fff;
	/* Two layers so the shadow reads evenly on ALL sides (incl. around the
	   flush image at the top), not just under the white caption: a tight,
	   near-symmetric layer outlines the whole tile, and a softer offset layer
	   gives the drop/elevation. */
	box-shadow: 0 0 6px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.14);
	text-align: center;
	padding-bottom: 1.25rem;
}

.dlf-fellow-card__image {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 0.8rem;
}

.dlf-fellow-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover/focus overlay: a dark scrim over the photo with the fellow's
   country/ies centered in white -- matches the live site. Accessible:
   - revealed on pointer hover AND keyboard focus (:focus-visible), not
     hover-only;
   - the country is real DOM text (not a CSS ::after), so it stays in the
     accessibility tree and is announced as part of the card link even while
     visually faded out -- it adds meaningful info rather than being purely
     decorative;
   - pointer-events:none so the scrim never intercepts the card click;
   - the scrim alone carries the meaning via text, not color, and its
     opacity keeps white text well above contrast minimums over any photo. */
.dlf-fellow-card__country {
	/* Overlaid on the square image but placed AFTER the name/year in the DOM
	   (see card-grid.php / fellows-archive.js) so the card link reads
	   "Name, Year, Country" in a natural order. Positioned against the card
	   (position: relative above) at the top, spanning its full width, with
	   `aspect-ratio: 1/1` giving it the same square footprint as the image
	   it covers. */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 500; /* the body's default 300 renders white text too thin over the scrim */
	line-height: 1.3;
	text-align: center;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.dlf-fellow-card:hover .dlf-fellow-card__country,
.dlf-fellow-card:focus-visible .dlf-fellow-card__country {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.dlf-fellow-card__country {
		transition: none;
	}
}

.dlf-fellow-card__name {
	display: block;
	font-size: 1rem;
	font-weight: 400;
	color: var(--dlf-heading-color);
}

.dlf-fellow-card__year {
	display: block;
	font-size: 0.85rem;
	color: var(--dlf-muted);
	margin-top: 0.15rem;
}

.dlf-no-fellows {
	color: var(--dlf-muted);
}

/* Modal — plain white card, matches the live site's card-click overlay.
   Uses the native <dialog> element (::backdrop below is the native dimmed
   background, not a hand-rolled overlay div). */

.dlf-fellow-modal {
	max-width: min(1200px, 94vw);
	max-height: min(595px, 88vh);
	width: 100%;
	overflow-y: auto;
	border: none;
	border-radius: 4px;
	padding: 2.5rem;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

/* The actual grid container — #dlf-fellow-modal-content is the wrapper JS
   injects header/body into, sitting between the dialog and those elements,
   so the grid has to live here for grid-column to apply to its children. */
#dlf-fellow-modal-content {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
}

/* Darker overlay, matching the live site's card-click modal */
.dlf-fellow-modal::backdrop {
	background: rgba(0,0,0,.8);
}

/* Compound selector (not just the single class) + explicit longhands --
   Kadence's Global Styles apply a filled button look to bare <button>
   elements, and beating it reliably needs both higher specificity and
   resetting every property it might touch (shorthand `background: none`
   alone wasn't enough once this lived under Kadence). */
.dlf-fellow-modal .dlf-fellow-modal__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	font-size: 1.5rem;
	line-height: 1;
	background: none;
	background-color: transparent;
	border: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	color: var(--dlf-muted);
	cursor: pointer;
}

.dlf-fellow-modal__header {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.dlf-fellow-modal__header img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.dlf-fellow-modal__body {
	grid-column: 2;
	min-width: 0;
}

.dlf-fellow-modal__name {
	margin: 0 0 0.25rem;
	font-size: 1.4rem;
}

.dlf-fellow-modal__meta {
	margin: 0;
	color: var(--dlf-muted);
}

/* "Leadership Vision" / "Project Description" bold labels inside the modal */
.dlf-fellow-modal__section-label {
	display: block;
	font-weight: 700;
	color: var(--dlf-heading-color);
	margin: 1.25rem 0 0.5rem;
}

.dlf-fellow-modal__learn-more {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.dlf-fellow-modal__learn-more a {
	text-decoration: underline;
}

.dlf-fellow-modal__full-profile {
	display: inline-block;
	margin-top: 1.5rem;
	font-weight: 700;
	text-decoration: underline;
}

/* ---- Single-fellow profile page ---- */
/* single-fellow.php: the canonical /fellows/<slug>/ page (in addition to
   the archive's modal) -- full-bleed photo hero (via .dlf-hero--page above)
   then breadcrumb chips, Leadership Vision / Project Description sections,
   and Learn More links below. */

.dlf-fellow-single {
	max-width: 960px;
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
	display: flow-root; /* contain the floated portrait below */
}

.dlf-fellow-single__breadcrumb {
	margin: 0;
}

/* The fellow's portrait, floated so the meta chips + bio sections wrap to its
   right and continue below it. Same soft card shadow as the archive tiles. */
.dlf-fellow-single__portrait {
	float: left;
	width: 240px;
	max-width: 42%;
	height: auto;
	margin: 0.25rem 1.75rem 1rem 0;
	box-shadow: 0 0 6px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.14);
}

/* On narrow screens, stop floating -- a 240px float beside text is too tight;
   show the portrait full-width above the text instead. */
@media (max-width: 560px) {
	.dlf-fellow-single__portrait {
		float: none;
		display: block;
		width: 220px;
		max-width: 70%;
		margin: 0 0 0.5rem;
	}
}

.dlf-fellow-single__breadcrumb a {
	text-decoration: underline;
	color: var(--dlf-muted);
}
.dlf-fellow-title {
	margin: 0.5rem auto;
	font-size: 220%;
}

/* Year / region / country chip row, each chip links back to the filtered archive */
.dlf-fellow-single__meta {
	display: flex;
	flex-wrap: wrap;
	/* justify-content: flex-end; Aligns items to the right */
	gap: 0.5rem;
	margin: 0.5rem 0 1rem;
}

.dlf-fellow-meta-chip {
	display: inline-block;
	font-size: 0.85rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--dlf-rule);
	border-radius: 999px;
	color: var(--dlf-text);
	text-decoration: none;
}

.dlf-fellow-meta-chip:hover {
	border-color: var(--dlf-heading-color);
}

.dlf-fellow-single__section {
	margin-bottom: 2.5rem;
}

.dlf-fellow-single__section-label {
	font-family: var(--dlf-font-body);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	text-transform: none;
	color: var(--dlf-heading-color);
	margin: 0 0 0.75rem;
}

.dlf-fellow-single__section-label.learn-more {
	text-align: left;
}

.dlf-fellow-single__learn-more {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.dlf-fellow-single__learn-more .dlf-btn-pill {
	padding: 0.5rem 0.75rem;
}

/* ---- Plain content page typography ---- */
/* page.php: styling for whatever comes out of the WP editor inside
   .dlf-plain-page__inner (see that wrapper's own rule further up) on the
   6 static pages (about, the-fellowship, apply, donate, contact-us). These
   are generic element selectors scoped to that wrapper, so any new content
   added through wp-admin picks up consistent styling automatically. */

.dlf-plain-page__inner h2 {
	/* 24px, matching the live site and the homepage's .dlf-mission__inner h2.
	   Was 1.4rem (22.4px), which made the static pages' section headings
	   slightly smaller than the same headings on the homepage. */
	font-size: 1.5rem;
	text-transform: uppercase;
	margin: 2.5rem 0 1rem;
}

.dlf-plain-page__inner h2:first-child {
	margin-top: 0;
}

/* 22px to match the live site's global h3 (proxima-nova 22px, not uppercase).
   Was 1.1rem (17.6px). Note live also sets font-weight: 300 and
   line-height: 2em on h3; ours inherits the 700 from the h1-h4 base rule and
   is therefore bolder than live -- left alone for now, flagged as a separate
   decision since it changes every static page's sub-headings. */
.dlf-plain-page__inner h3 {
	font-family: var(--dlf-font-body);
	font-size: 1.375rem;
	text-transform: none;
	margin: 2rem 0 0.5rem;
}

.dlf-plain-page__inner p {
	margin: 1rem 0 0 0;
}

.dlf-plain-page__inner ul, .dlf-plain-page__inner ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.dlf-plain-page__inner li {
	margin-bottom: 0.5rem;
}

.dlf-plain-page__inner a {
	text-decoration: underline;
}

.dlf-plain-page__inner blockquote {
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--dlf-rule);
	font-style: italic;
	color: var(--dlf-text);
}

.dlf-plain-page__inner blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-size: 0.9rem;
	color: var(--dlf-muted);
}

/* ---- Mid-page full-bleed section hero + parallax ---- */
/* Mid-page full-bleed section break with an overlaid title (e.g. About's
   "Our Origin"). This markup lives in page.php post_content (the WP
   database), NOT in a template file -- see docs/full-width-parallax-hero.md
   for the full writeup of how this differs from the homepage's sticky
   ".dlf-hero" above, including two easy-to-repeat gotchas:
     1. the 100vw/left:50%/margin-left:-50vw full-bleed breakout trick
        (needed here because this sits inside a centered content column;
        the page-level hero above doesn't need it, it's already a top-level
        sibling of that column)
     2. why the drift below uses `view()` instead of `scroll(root)` (this
        section can land at any scroll depth, unlike the page-level hero
        which always starts at scroll offset 0)
   Full 100vh to match the live site (confirmed via live inspection: its
   "Our Origin" image band renders at exactly 100vh, not a shorter static
   banner) -- unlike the page-level hero it's not sticky/pinned though, it
   scrolls normally with the image itself drifting. */
.dlf-section-hero {
	position: relative;
	left: 50%;
	width: 100vw;
	margin: 3rem 0;
	margin-left: -50vw;
	height: 100vh;
	min-height: 480px;
	display: grid;
	place-items: center;
	/* clip, not hidden: overflow:hidden establishes a scroll container, which
	   the img's `view()` timeline below then picks up as its nearest ancestor
	   scroll container instead of the document -- since that container never
	   itself scrolls, the timeline reads a constant progress and the drift
	   freezes. overflow:clip visually clips the same way but isn't a scroll
	   container, so view() correctly tracks real page scroll. */
	overflow: clip;
}

.dlf-section-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 136%; /* headroom for the drift animation below, so it never exposes an empty edge */
	top: -18%;
	object-fit: cover;
}

.dlf-section-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.35));
}

/* Enhanced state (added by homepage-parallax.js once the <img> src is known):
   swap the drifting <img> for a viewport-fixed background on the hero box
   itself -- the same background-attachment:fixed reveal the homepage
   silhouette uses (see .dlf-content-photo--silhouette above), so "Our Origin"
   reads as a window the section scrolls over rather than an image that drifts
   inside its frame. Without JS the class is absent and the <img> + view()
   drift below stay as the fallback. */
.dlf-section-hero.is-fixed-bg {
	background-image: var(--dlf-section-hero-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.dlf-section-hero.is-fixed-bg img {
	display: none;
}

/* Reduced motion (and iOS Safari, which ignores fixed attachment anyway):
   pin the background to normal scroll -- the photo still shows, just without
   the viewport-anchored reveal. */
@media (prefers-reduced-motion: reduce) {
	.dlf-section-hero.is-fixed-bg {
		background-attachment: scroll;
	}
}

/* Deliberately an <h2>, not <h1> -- the live site marks this up as a second
   h1.page-title (SquareSpace duplicates the page's h1 for every mid-page
   section break), which we don't replicate for accessibility (one h1 per
   page). Font size still matches the live site's 49px visual size.
   Selector is `.dlf-section-hero .dlf-section-hero__title`, not just the
   single class, so it outranks ".dlf-plain-page__inner h2" further down
   (an element+class selector, which beats a lone class on specificity) --
   that rule was silently winning for font-size/text-transform before,
   capping this at 22.4px regardless of what was set here. */
.dlf-section-hero .dlf-section-hero__title {
	position: relative;
	/* Above the ::after gradient overlay. Both the title and ::after are
	   positioned with auto z-index, so without this the ::after (the last
	   child in tree order) paints over the white title and tints it gray --
	   very visible over a bright photo like "Our Origin". */
	z-index: 1;
	color: #fff;
	font-family: var(--dlf-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 3.2vw, 3.0625rem); /* 49px at desktop widths, matches .dlf-hero__title */
	letter-spacing: normal;
	text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Drift animation tied to the section's own visibility (view-timeline) --
   works regardless of how far down the page this section lands, unlike the
   page-level hero's `scroll(root)` timeline above.

   ∓12% here, not ∓18%: the static `top: -18%` above is container-relative,
   but this `transform: translateY(%)` is relative to the img's own
   136%-tall box, so the two don't share a reference frame -- ∓18% in the
   box's own terms would be ∓24.5% of the container, overshooting the
   ∓18% of headroom `height: 136%` provides and exposing a gap at both ends
   of the scroll-through. ∓12% (≈∓16.3% container-relative) stays safely
   inside that budget -- same margin ratio as the original ∓7%/118%/-9%
   design (see .dlf-content-photo's matching rule), just scaled ~2x for
   more noticeable motion. See the near-identical bug (and full writeup)
   fixed on .dlf-hero__img's drift above. */
@supports (animation-timeline: view()) {
	@keyframes dlf-section-hero-drift {
		from { transform: translateY(-12%); }
		to   { transform: translateY(12%); }
	}
	.dlf-section-hero img {
		animation: dlf-section-hero-drift linear both;
		animation-timeline: view();
		animation-range: cover;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlf-section-hero img {
		animation: none;
		transform: none;
	}
}

/* ---- Core-values icon row ---- */
/* About page post_content only: the 5 colored circle icons (Integrity,
   Interdependence, Resilience, Humbition, Courage) below the core-values
   bullet list. Lives in the WP database, not a template file. No max-width
   here on purpose (Than found the old 480px-capped version too small) --
   the row fills the full content column and each circle scales with it,
   down to the 3-column mobile override further below. */
.dlf-values-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0 2rem;
}

.dlf-values-grid img {
	width: 100%;
	border-radius: 50%;
}

/* ---- Full-bleed navy title band + centered section subheads ---- */
/* Reusable "blue stripe" section header (first used for the About page's
   "Meet the Team"): a full-bleed navy band with a centered uppercase title.
   Opt-in per block via CSS classes so it can be dropped on any page, NOT keyed
   to a specific heading's anchor:
     - add "dlf-title-band"   to a Heading block  -> the navy band
     - add "dlf-section-subhead" to a Heading block -> a centered uppercase
       subhead (e.g. "Leadership Team" / "Community Fellows" under the band)
   (In wp-admin: select the Heading block -> Advanced -> "Additional CSS
   class(es)".) The 100vw / left:50% / margin-left:-50vw breakout is the same
   trick .dlf-section-hero uses; it relies on the overflow-x:clip already set on
   body/ancestors (see the note near the top of this file) so it doesn't spawn a
   horizontal scrollbar. */
.dlf-plain-page__inner .dlf-title-band {
	position: relative;
	left: 50%;
	width: 100vw;
	margin: 3rem 0 2.5rem;
	margin-left: -50vw;          /* must come AFTER the margin shorthand */
	padding: 7.75rem 1.5rem;        /* ~80px top/bottom, like the live band */
	background: rgba(8, 28, 99, 0.9);
	color: #fff;
	text-align: center;
	text-transform: uppercase;   /* self-contained -- don't depend on the base h2 rule */
	font-size: clamp(2rem, 5vw, 49px);
	font-weight: 700;
}

.dlf-plain-page__inner .dlf-title-band-sub {
	display: block;
	width: 100%;
	text-align: center;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	text-transform: capitalize!important;
	margin-top: 3rem;
	margin-bottom: -3rem;
}

.dlf-plain-page__inner .dlf-title-band.faq ~ h3 {
	text-transform: uppercase;
	font-size: 1.5rem;
	font-weight: bold;
}


.dlf-plain-page__inner .dlf-section-subhead {
	font-family: var(--dlf-font-heading);
	font-size: clamp(1.5rem, 3vw, 2.25rem);   /* ~36px */
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.015em;                  /* ~0.54px at 36px */
	color: var(--dlf-heading-color);
	margin: 2.5rem 0 1.5rem;
}

/* ---- Team / community-fellow headshot grid ---- */
/* About page post_content only: "Leadership Team" and "Community Fellows"
   headshot grids ("Meet the Team" section). Lives in the WP database, not
   a template file. Four fixed columns per row; images are fluid (width:100%
   + square aspect-ratio) so they fill each column and stay square as the
   column width flexes. */
.dlf-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	margin: 1.5rem 0 2rem;
}

.dlf-team-member img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 0.6rem;
}

.dlf-team-member p {
	margin: 0;
	font-size: 0.9rem;
}

/* ---- Page photo figure ---- */
/* Any page.php post_content with an inline <figure class="dlf-page-photo">
   (e.g. About's "countries our Fellows come from" map). Optional
   <figcaption> renders as small italic muted text below the image. */

.dlf-page-photo {
	margin: 1.5rem 0;
}

.dlf-page-photo img {
	width: 100%;
	border-radius: 4px;
}

.dlf-page-photo figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--dlf-muted);
	font-style: italic;
}

/* ---- External links row ---- */
/* page.php post_content: a horizontal row of plain links (e.g. Apply
   page's application-portal links). No special visual treatment beyond
   spacing -- links themselves are styled by ".dlf-plain-page__inner a" above. */
.dlf-external-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0;
}

/* ---- FAQ accordion ---- */
/* Apply page post_content only, native details/summary elements, no JS
   needed. Lives in the WP database, not a template file. */
.dlf-faq-category {
	margin: 2rem 0 1rem;
	font-family: var(--dlf-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 2rem;
}

.dlf-faq-item {
	border-bottom: 1px solid var(--dlf-rule);
	padding: 0.9rem 0;
}

.dlf-faq-item summary {
	font-weight: 700;
	cursor: pointer;
	color: var(--dlf-heading-color);
}

.dlf-faq-item p {
	margin: 0.75rem 0 0;
}

/* ---- Mobile breakpoint (<=700px) ---- */
/* Overrides several sections above for narrow viewports: footer link
   columns go single-column, the fellow modal and its image shrink, and the
   core-values row drops from 5 columns to 3. Header/nav responsiveness is
   now Kadence's own (mobile menu toggle etc.), not handled here. */
@media (max-width: 700px) {
	.dlf-footer-columns {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.dlf-fellow-modal {
		max-height: 88vh;
	}
	#dlf-fellow-modal-content {
		grid-template-columns: 1fr;
	}
	.dlf-fellow-modal__header img {
		width: 120px;
		aspect-ratio: 1 / 1;
	}
	.dlf-values-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}