/*
  ENLC -- styles.css
  Wireframe-specific layout CSS (website-wireframe skill, harness-website-rebuild plugin).
  Builds on tokens.css semantic vars/classes. Static layout + a minimal vanilla-JS mobile-nav toggle
  (assets/nav.js) -- see 5) Enhancement Pass/03-design-handoff.md Batch 1/3.
  Visual tone: Modern minimal -- restrained grid, generous negative space, fewer/larger photo placements.
*/

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-xs) var(--space-md);
  z-index: 100;
}
.skip-link:focus { left: var(--space-xs); top: var(--space-xs); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Header / Nav ===== */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-md);
}
.site-logo { display: flex; align-items: center; gap: var(--space-xs); }
.site-logo img { height: 40px; width: auto; display: block; }
.site-logo__text { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: var(--color-primary); }

.site-nav { display: none; align-items: center; gap: var(--space-lg); }
.site-nav__links { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.site-nav__links a {
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-weight: var(--fw-heading-semibold);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
}
.site-nav__links a:hover { color: var(--color-primary); text-decoration: none; border-bottom-color: var(--color-primary); }
.site-nav__links a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.site-nav__utility { display: flex; align-items: center; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.site-nav__utility a { color: var(--color-text-muted); font-size: var(--fs-small); }
.site-nav__utility a:hover { color: var(--color-primary); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--color-surface-raised); }

.nav-drawer {
  display: none;
  background: var(--color-accent);
  padding: var(--space-md);
}
.nav-drawer.is-open { display: block; }
.nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer li { border-bottom: 1px solid var(--color-border-strong); }
.nav-drawer a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-on-accent);
  font-weight: var(--fw-heading-semibold);
}
.nav-drawer a[aria-current="page"] { color: var(--color-primary); }

@media (min-width: 1025px) {
  .site-nav { display: flex; }
  .nav-toggle, .nav-drawer { display: none !important; }
}

/* ===== Containers / Sections ===== */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-md); }
.section { padding: var(--space-3xl) 0; }
.section--tight { padding: var(--space-2xl) 0; }
.section__intro { max-width: 720px; margin: 0 0 var(--space-xl); }
.section__intro--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ===== Hero ===== */
.hero { position: relative; min-height: 480px; display: flex; align-items: center; }
.hero__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim { position: absolute; inset: 0; }
.hero__content { position: relative; z-index: 2; max-width: 640px; padding: var(--space-2xl) var(--space-md); }
.hero__content h1 { color: var(--color-on-primary); }
.hero__content p { color: var(--color-on-primary); font-size: 1.125rem; margin-bottom: var(--space-lg); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ===== Home hero -- flagship treatment (tournament winner: home-hero) =====
   Fixes: all 10 hero sections were byte-identical with zero art direction,
   and the H1 didn't contain "conservation" (the client's own #1-named
   positioning problem). Scoped under .hero--flagship, which ONLY index.html
   carries -- the shared .hero/.hero__media/.hero__scrim/.hero__content rules
   above, used by all 9 interior hero pages, are untouched. */
.hero.hero--flagship { min-height: clamp(520px, 82vh, 760px); align-items: flex-end; }
.hero--flagship .hero__scrim {
  background: linear-gradient(0deg,
    rgba(1, 81, 52, 0.58) 0%, rgba(1, 81, 52, 0.32) 32%,
    rgba(1, 81, 52, 0.08) 58%, rgba(1, 81, 52, 0) 75%);
}
.hero--flagship .hero__content { padding: 0 var(--space-md) var(--space-2xl); }
@media (min-width: 1025px) { .hero--flagship .hero__content { padding-bottom: var(--space-3xl); max-width: 680px; } }

/* Elevated content card -- warm near-opaque panel (not dark glass), keeps the
   nonprofit register and guarantees WCAG contrast regardless of the photo
   behind it once real images land. A single layered element (padding+radius+
   shadow are native panel properties), not nested wrapper divs, so a
   non-technical Duda editor can reproduce it. */
.hero-flagship-card {
  background: rgba(248, 249, 249, 0.95);
  border: 1px solid rgba(1, 81, 52, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 24px 48px rgba(1, 81, 52, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: heroCardIn var(--motion-slow) var(--motion-easing) both;
}
@media (min-width: 1025px) { .hero-flagship-card { padding: var(--space-lg) var(--space-xl); } }
@supports (backdrop-filter: blur(1px)) { .hero-flagship-card { backdrop-filter: blur(8px); } }

/* Text sits on the light card now, not the dark scrim -- needs surface text
   colors instead of the on-primary (white) colors the shared .hero__content
   h1/p rules set for interior heroes. Incidentally fixes a pre-existing risk:
   .btn-secondary renders primary-green text/border, which read green-on-
   dark-green directly on the old scrim; on the card it is green-on-near-
   white (8.94:1, comfortably passing AA). */
.hero--flagship .hero-flagship-card h1 { color: var(--color-on-surface); }
.hero--flagship .hero-flagship-card p { color: var(--color-text); }
.hero--flagship .hero-flagship-card .hero-flagship-card__meta {
  font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption);
  font-weight: var(--fw-caption); margin: 0 0 var(--space-xs); color: var(--color-primary);
}

/* Single on-load reveal only (MOTION band 2-4, ENLC-capped) -- a gentle
   fade/rise/soften-to-clear, not a loop, not scroll-hijacking. tokens.css
   already hard-nukes all animation/transition under prefers-reduced-motion. */
@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ===== Gateway cards (hub-page anchor navigation) ===== */
.gateway-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) { .gateway-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .gateway-grid { grid-template-columns: repeat(3, 1fr); } }

.gateway-card { display: block; color: var(--color-text); }
/* h2, not h3: promoted by the heading-level fix (5) Enhancement Pass/02-current-state-audit.md
   P1 row) -- gateway-card titles are now the first-level subsection heading after each page's h1,
   with the matching full section further down demoted to h3. */
.gateway-card h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-heading-semibold); color: var(--color-primary); margin-bottom: var(--space-xs); }

/* ===== Signature audience-gateway device (tournament winner: home's
   "What We Do", the one page that had the gateway-grid component missing --
   brand-expression floor P0). Icon system is new here first, then reusable
   sitewide later without forcing icons onto cards that don't opt in. ===== */
.gateway-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-full); background: var(--color-accent);
  margin-bottom: var(--space-sm);
  box-shadow: inset 0 1px 2px rgba(1, 81, 52, .18), 0 1px 2px rgba(1, 81, 52, .06);
  transition: transform var(--motion-base) var(--motion-easing), box-shadow var(--motion-base) var(--motion-easing);
}
.gateway-card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--color-secondary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gateway-card:hover .gateway-card__icon, .gateway-card:focus-within .gateway-card__icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: inset 0 1px 2px rgba(1, 81, 52, .18), var(--shadow-2);
}
.gateway-card__meta { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-sm); font-size: var(--fs-small); font-weight: var(--fw-heading-semibold); color: var(--color-primary); }
.gateway-card__meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-base) var(--motion-easing); }
.gateway-card:hover .gateway-card__meta svg, .gateway-card:focus-within .gateway-card__meta svg { transform: translateX(3px); }

/* Signature-instance card shell -- materiality upgrade scoped to this
   modifier class so the other 5 pages' plain gateway-card instances are
   untouched. */
.gateway-grid--signature .gateway-card {
  padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface-raised);
  transition: box-shadow var(--motion-base) var(--motion-easing), transform var(--motion-base) var(--motion-easing), border-color var(--motion-base) var(--motion-easing);
}
.gateway-grid--signature .gateway-card:hover, .gateway-grid--signature .gateway-card:focus-within {
  box-shadow: var(--shadow-3); border-color: var(--color-primary); transform: translateY(-4px);
}

/* Lead image above the grid -- keeps home-what-we-do-01 as a single header
   image rather than a per-card photo (no new image slots invented). */
.gateway-lead-media { max-width: 640px; margin: 0 auto var(--space-lg); border-radius: var(--radius-lg); overflow: hidden; }
.gateway-lead-media img, .gateway-lead-media .slot-placeholder { display: block; width: 100%; }
/* Touch-accessibility fix (5) Enhancement Pass/tournament/signature-device-audience-gateway.md):
   the hover-conceal/reveal behavior only applies on devices with a fine pointer that can hover.
   A single tap on a touchscreen both focuses and activates the link, so subtext was previously
   never perceivable there -- now visible by default and only concealed-then-revealed for
   mouse/trackpad users, preserving the client's cited "headers visible, subtext on hover" rule
   (Context.md:118) for the devices that can actually hover. */
.gateway-card__sub { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .gateway-card__sub {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--motion-base) var(--motion-easing), opacity var(--motion-base) var(--motion-easing);
  }
  .gateway-card:hover .gateway-card__sub,
  .gateway-card:focus-within .gateway-card__sub { max-height: 200px; opacity: 1; }
}

/* ===== Program / story card grid ===== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) { .card-grid--2up { grid-template-columns: repeat(2, 1fr); } }
/* .card-grid--3up retained for genuine 3-item card rows (e.g. become-a-member.html
   #membership-tiers, Latest From the Field). The P0 misuse -- 14 instances fed only 2
   children (one media div + one text div), always allocating a dead 3rd track at
   desktop widths -- is fixed by migrating those specific instances to .media-row /
   .feature-portrait below (tournament winner: program-service-cards-grid), not by
   changing this rule, which other, genuinely-3-item rows still rely on. */
@media (min-width: 1025px) { .card-grid--3up { grid-template-columns: repeat(3, 1fr); } }

/* ===== Media row: real 2-column image+text (tournament winner:
   program-service-cards-grid). Replaces the .card-grid--3up-with-2-children
   misuse across programs/contact/news-events/employment/become-a-member. ===== */
.media-row { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
@media (min-width: 1025px) {
  .media-row { grid-template-columns: 5fr 7fr; gap: var(--space-xl); }
  .media-row--reverse > .media-row__frame { order: 2; }
  .media-row--reverse > .media-row__body { order: 1; }
}
.media-row__frame { padding: var(--space-xs); background: var(--color-surface-raised); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.media-row__media { aspect-ratio: 4 / 3; border-radius: calc(var(--radius-lg) - 4px); overflow: hidden; background: var(--color-divider); }
.media-row__media--portrait { aspect-ratio: 1 / 1; }
.media-row__media img, .media-row__media .slot-placeholder { width: 100%; height: 100%; }
.media-row__media img { object-fit: cover; display: block; transition: transform var(--motion-slow) var(--motion-easing); }
.media-row:hover .media-row__media img { transform: scale(1.02); }
.media-row__body { display: flex; flex-direction: column; gap: var(--space-sm); }
.media-row__body > *:first-child { margin-top: 0; }

/* No-media variant (Events Calendar): a real second column instead of a blank track. */
.media-row--callout .media-row__callout { background: var(--color-accent); color: var(--color-on-accent); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; }
.media-row__callout .callout-label { display: block; font-family: var(--font-body); font-weight: var(--fw-heading-semibold); font-size: var(--fs-small); color: var(--color-on-accent); margin-bottom: var(--space-xs); }
.media-row__callout .callout-date { display: block; font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.media-row__callout p { margin: var(--space-xs) 0 0; color: var(--color-on-accent); }

/* Breakout family for portrait "specimen ID" slots -- one per page, to satisfy a
   zigzag-alternation cap (max 2 consecutive media-rows) rather than repeating
   media-row a 3rd time in sequence. Shares the bezel-frame language for consistency. */
.feature-portrait { display: grid; grid-template-columns: 1fr; gap: var(--space-md); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
@media (min-width: 768px) { .feature-portrait { grid-template-columns: 200px 1fr; align-items: start; } }
.feature-portrait__frame { padding: var(--space-xs); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.feature-portrait__media { aspect-ratio: 1 / 1; width: 100%; border-radius: calc(var(--radius-md) - 3px); overflow: hidden; background: var(--color-divider); }
.feature-portrait__media img, .feature-portrait__media .slot-placeholder { width: 100%; height: 100%; }
.feature-portrait__media img { object-fit: cover; display: block; }

/* Pending-link state: genuinely sourceless dead links get an honest, consistent
   "not live yet" treatment instead of a silent href="#". */
.btn--pending { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.btn--pending:hover { background: var(--color-surface-raised); }
.btn--pending .pending-tag { display: inline-block; margin-left: var(--space-xs); font-size: var(--fs-caption); font-weight: var(--fw-body-regular); color: var(--color-text-muted); }

/* Reveal via the page-level .js-anim gate (assets/reveal.js) -- belt-and-suspenders
   F2: the hidden state only applies once .js-anim confirms IntersectionObserver
   support, AND is independently forced visible under prefers-reduced-motion. */
.js-anim .media-row, .js-anim .feature-portrait { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slow) var(--motion-easing), transform var(--motion-slow) var(--motion-easing); }
.js-anim .media-row.is-visible, .js-anim .feature-portrait.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .media-row, .js-anim .feature-portrait { opacity: 1; transform: none; transition: none; }
}

/* Session 13 fix: neither component had a max-width, so as a standalone
   single-column block (not inside a media-row's 2-up grid) it stretched to the
   full ~1152px content column -- a real, permanent layout defect (it hit real
   photos too, not just placeholders) that none of the 10 design-enhancement
   tournament sections targeted, since neither component was one of them. */
.media-card { max-width: 720px; margin: 0 auto var(--space-lg); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
/* Also capped standalone (about-us.html uses bare .media-card__media, with no
   .media-card wrapper, as a lone image insert -- the wrapper's cap alone
   didn't reach those instances). Redundant, harmless when nested inside an
   already-capped .media-card. */
.media-card__media { max-width: 720px; margin: 0 auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-divider); }
.media-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card__body { padding: var(--space-md); }
.media-card__body h3 { font-size: var(--fs-h4); margin-bottom: var(--space-xs); }

.portrait-media { max-width: 320px; margin: 0 auto var(--space-md); aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md); background: var(--color-divider); }
.portrait-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wide-divider { aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--color-divider); }
.wide-divider img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Stat grid (Impact by the Numbers) ===== */
/* ===== Stat band (tournament winner: impact-outcomes-stats-band;
   re-colored session 12, 2026-07-15 per the Section Color Doctrine) =====
   P0 fix (session 10): 3 stat-items get a grid track built for 3 items at
   every breakpoint (was repeat(2,1fr) on mobile -> item 3 stranded alone in
   its own row, and repeat(4,1fr) on desktop -> a dead quarter-width gap).
   Color overhaul (session 12): the section itself moved from bg-accent (a
   light sage tint) to bg-primary (solid, full-bleed) -- matching Adventure
   Bags' impact band directly, one of the two highest-leverage "bold color"
   fixes from the Round-2 critique. The flagship figure (381,000 acres,
   ENLC's sanctioned headline stat) no longer gets a white bordered plate
   (that only stood out because it was the one thing NOT green on an
   already-pale band); it now gets an --color-accent-filled pill instead --
   a second brand color popping against the primary band, mirroring CCCC's
   own colored-stat-pill technique, and still the one item with genuinely
   different visual weight. */
.stat-band .wide-divider { margin-top: var(--space-2xl); }
.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); text-align: center; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .stat-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.stat-item { position: relative; padding: var(--space-sm) 0; }
@media (max-width: 767px) {
  .stat-item + .stat-item { border-top: 1px solid var(--color-on-primary-muted); padding-top: var(--space-lg); }
}
@media (min-width: 768px) {
  .stat-item { padding: 0 var(--space-md); }
  .stat-item + .stat-item::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--color-on-primary-muted); }
  .stat-item--flagship + .stat-item::before { display: none; }
}
.stat-item--flagship { background: var(--color-accent); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--space-lg) var(--space-md); }
.stat-item .stat-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-on-primary); display: block; }
.stat-item--flagship .stat-number { font-size: clamp(2.75rem, 1rem + 4vw, 3.5rem); color: var(--color-primary); }
.stat-item .stat-label { font-size: var(--fs-small); color: var(--color-accent); }
.stat-item--flagship .stat-label { color: var(--color-on-accent); }

/* Gentle one-time reveal via the shared .reveal--pre/.is-visible contract
   (assets/reveal.js) -- default (no .reveal--pre) is fully visible: safe
   with no JS and under prefers-reduced-motion. */
.stat-grid.reveal--pre .stat-item { opacity: 0; transform: translateY(10px); transition: opacity var(--motion-slow) var(--motion-easing), transform var(--motion-slow) var(--motion-easing); }
.stat-grid.reveal--pre .stat-item:nth-child(1) { transition-delay: 0ms; }
.stat-grid.reveal--pre .stat-item:nth-child(2) { transition-delay: 90ms; }
.stat-grid.reveal--pre .stat-item:nth-child(3) { transition-delay: 180ms; }
.stat-grid.is-visible .stat-item { opacity: 1; transform: none; }

/* ===== Donate CTA band ===== */
/* ===== Donate/CTA band (tournament winner: primary-donate-cta) =====
   Replaces the old full-bleed-green .donate-band (a color-flood repeated
   identically on 6 pages). The section itself stays on --color-surface
   (white); the primary green is confined to one rounded, contained panel --
   the ONE high-contrast CTA moment per page (homepage-design-standards.md
   principle 4), not a flooded section (principle 1). */
.donate-band { background: var(--color-surface); text-align: left; }
.donate-band__panel {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.donate-band__panel--single { justify-content: flex-start; }
.donate-band__panel--single .donate-band__copy { max-width: none; }
.donate-band__copy { max-width: 32rem; flex: 1 1 320px; }
.donate-band h2 { color: var(--color-on-primary); margin-bottom: var(--space-xs); }
.donate-band p { color: var(--color-on-primary); opacity: .92; margin: 0; font-size: 1.0625rem; line-height: var(--lh-body); }
.donate-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); flex-shrink: 0; }
/* On-dark-panel button pair -- AA-safe, verified 9.2:1 both directions
   (#015134 on #FFFCF5). Replaces .btn-accent-cta inside this component only
   (.btn-accent-cta itself is separately fixed sitewide via --color-cta-accent
   in tokens.css for its other, non-donate-band uses). */
.btn-cta-primary { background: var(--color-on-primary); color: var(--color-primary); border-color: var(--color-on-primary); }
.btn-cta-primary:hover { background: transparent; color: var(--color-on-primary); border-color: var(--color-on-primary); }
.btn-cta-secondary { background: transparent; color: var(--color-on-primary); border-color: var(--color-on-primary); }
.btn-cta-secondary:hover { background: var(--color-on-primary); color: var(--color-primary); }
@media (max-width: 767px) {
  .donate-band__panel { flex-direction: column; align-items: flex-start; padding: var(--space-xl) var(--space-lg); }
  .donate-band__actions { width: 100%; }
  .donate-band__actions .btn { width: 100%; }
}
/* Uses the shared .reveal--pre/.is-visible contract from assets/reveal.js
   (not a bespoke .is-pending class) so donate-band panels are processed by
   the same single IntersectionObserver loop as every other tournament
   section's motion, rather than a second, conflicting observer. */
.donate-band__panel.reveal--pre { opacity: 0; transform: translateY(12px); }
.donate-band__panel { transition: opacity var(--motion-slow) var(--motion-easing), transform var(--motion-slow) var(--motion-easing); }

/* Header utility nav: Member promoted out of the muted-link list into a
   real button paired with Donate (was visually demoted below Donate despite
   Context.md naming both as equally central visitor actions). */
.site-nav__cta-group { display: flex; align-items: center; gap: var(--space-xs); }
.btn--nav { min-height: 44px; padding: 6px var(--space-sm); font-size: var(--fs-small); }

/* ===== Verification markers (never shipped to Duda) =====
   Replaces the old .internal-flag block (Round-2 Fix 4, session 12): that component
   rendered the full internal VERIFY note as bare visitor-visible text on the public
   deploy -- a confirmed Gate 2/3 audit blocker (session 13), the same leak class as
   the session-10 confidentiality fix, this time undetected because flagscan.py's
   marker vocabulary only matches bracket-form text like "[VERIFY]", not this
   component's plain "VERIFY:" prefix. Fixed at the root: no verification detail
   lives in the HTML at all anymore, not even in a comment (view-source still exposes
   comments to any visitor) -- each spot gets a small numbered marker only, mapped to
   the full note in the project's client verification report (kept outside the site
   folder). Critical items keep a visual distinction (bold + warning color) without
   adding any text a visitor could not already infer from context. */
.verify-note { margin: var(--space-xs) 0 0; }
.verify-marker {
  font-size: 0.7em;
  color: var(--color-text-muted);
  cursor: help;
  font-weight: 600;
}
.verify-marker--critical { color: var(--color-warning); }

/* Hero placeholders sit under a scrim + H1/subhead already identifying the
   page - their own caption text would visually collide with that overlay, so
   only the textured backdrop shows here (the "no photo yet" signal is the
   pattern itself, not competing copy). */
.hero__media .slot-placeholder {
  color: transparent;
}
.hero__media .slot-placeholder .caption {
  display: none;
}

.slot-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 160px;
  background: repeating-linear-gradient(45deg, var(--color-divider), var(--color-divider) 10px, var(--color-surface-raised) 10px, var(--color-surface-raised) 20px);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-align: center;
  padding: var(--space-xs);
}

/* ===== Footer =====
   Color-usage overhaul (session 12, 2026-07-15): was --color-surface-raised (light
   gray-green, indistinguishable from a body section) -- now a solid --color-primary
   band, matching all three AM-supplied reference sites' dark-footer convention
   (CCCC deep purple / Adventure Bags deep teal / Reese's Purpose burgundy). See
   1) Design System/design-system-notes.md "Section Color Doctrine" for the full
   contrast-pair rationale. */
.site-footer { background: var(--color-primary); color: var(--color-accent); border-top: none; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.site-footer h4 { color: var(--color-on-primary); font-size: var(--fs-h4); margin-bottom: var(--space-sm); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-xs); }
.site-footer p { color: var(--color-accent); }
.site-footer a { color: var(--color-accent); }
.site-footer a:hover { color: var(--color-on-primary); }
/* The traced/vectorized logo asset bakes in its own light background shapes rather
   than sitting on a transparent field -- an explicit light chip guarantees it reads
   cleanly on the new dark footer regardless of the SVG's own internal fills. */
.site-footer__logo img { height: 36px; margin-bottom: var(--space-sm); background: var(--color-surface); padding: 8px 14px; border-radius: var(--radius-sm); }
.site-footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.site-footer__bottom {
  border-top: 1px solid var(--color-on-primary-muted);
  padding: var(--space-md);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-on-primary-muted);
}

/* =====================================================================
   Design-enhancement pass additions (5) Enhancement Pass/03-design-handoff.md)
   Shared reveal system: one convention (.reveal/.reveal--pre/.is-visible +
   data-reveal) used by every tournament-winner section that ships motion, so
   assets/reveal.js only needs to run once per page regardless of how many
   sections it touches. MOTION band 2-4 (ENLC-locked; hover/reveal only) --
   NOT the skill's generic 4-6 default. Every rule below fails open: only JS
   ever adds the hidden .reveal--pre state, so no-JS / JS-error / reduced-
   motion visitors always see fully visible content.
   ===================================================================== */
.reveal {
  transition: opacity var(--motion-slow) var(--motion-easing),
              transform var(--motion-slow) var(--motion-easing);
}
.reveal.reveal--pre { opacity: 0; transform: translateY(14px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal--pre { opacity: 1; transform: none; transition: none; }
}

/* ===== Flow row: alternating side-by-side media/text
   (tournament winner: home-section-flow-variety; also used by
   program-service-cards-grid) ===== */
.flow-row__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 1025px) { .flow-row__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1024.98px) { .flow-row__grid { grid-template-columns: 1fr; } }

.flow-row__frame {
  padding: var(--space-xs);
  background: var(--color-surface-raised);
  border-radius: calc(var(--radius-lg) + var(--space-xs));
  box-shadow: 0 20px 48px rgba(1, 81, 52, .10), var(--shadow-1);
}
.flow-row__media-inner {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-divider);
}
.flow-row__media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow-row__content h2 { margin-bottom: var(--space-sm); }
.flow-row__list { margin: var(--space-md) 0 var(--space-lg); padding-left: 1.15rem; }
.flow-row__list li { margin-bottom: var(--space-sm); }
.flow-row__list li:last-child { margin-bottom: 0; }

/* Stat pull: sanctioned-figure callout relocated out of body copy
   (shorten/relocate/polish mandate), echoes the existing stat-grid idiom */
.stat-pull {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  margin: 0 0 var(--space-lg); padding-top: var(--space-sm);
  border-top: 1px solid var(--color-divider);
}
.stat-pull__number {
  display: block; font-family: var(--font-heading); font-weight: var(--fw-heading-bold);
  font-size: 1.75rem; color: var(--color-primary); line-height: 1;
}
.stat-pull__label { display: block; font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: 4px; }

/* Latest From the Field: media tile + hairline-divided editorial list --
   deliberately a third rhythm, distinct from both the flow-row split above
   and the sitewide 3-equal-card idiom */
.field-dispatch__heading { margin-bottom: var(--space-lg); }
.field-dispatch__grid { align-items: start; }
.field-dispatch__media-inner {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-divider);
}
.field-dispatch__media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-dispatch__caption { margin-top: var(--space-sm); }
.field-dispatch__list { display: flex; flex-direction: column; }
.field-dispatch__row { padding: var(--space-md) 0; border-top: 1px solid var(--color-divider); }
.field-dispatch__row:first-child { border-top: none; padding-top: 0; }
.field-dispatch__row h3 { margin-bottom: var(--space-xs); }
.field-dispatch__row p { margin-bottom: var(--space-xs); }
.field-dispatch__link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-heading-semibold); color: var(--color-primary); }
.field-dispatch__arrow { display: inline-block; transition: transform var(--motion-base) var(--motion-easing); }
.field-dispatch__link:hover .field-dispatch__arrow { transform: translateX(3px); }
.field-dispatch__link:hover { text-decoration: underline; }

/* ===== Partner/sponsor org-wall + footer strip (tournament winner:
   about-partners-logo-row) ===== */
.partners-lead { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; margin-bottom: var(--space-xl); }
@media (min-width: 768px) { .partners-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); } }
.partners-lead__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.partners-lead__media img, .partners-lead__media .slot-placeholder { width: 100%; height: 100%; }
.partners-lead__media img { object-fit: cover; display: block; }
.partners-lead__body p { margin: 0; }

.org-wall { display: flex; flex-direction: column; gap: var(--space-xl); }
.org-wall--compact { gap: var(--space-md); margin-top: var(--space-lg); }
.org-wall__group-heading { margin-bottom: var(--space-sm); }
.org-wall__grid { list-style: none; margin: 0 0 var(--space-xs); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
@media (min-width: 600px)  { .org-wall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .org-wall__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1025px) { .org-wall__grid--dense { grid-template-columns: repeat(5, 1fr); } }

.org-tile {
  display: flex; align-items: center; gap: var(--space-sm);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: border-color var(--motion-base) var(--motion-easing), box-shadow var(--motion-base) var(--motion-easing), transform var(--motion-base) var(--motion-easing);
}
.org-tile:hover { border-color: var(--color-primary); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.4); transform: translateY(-2px); }
.org-tile--sm { padding: var(--space-xs) var(--space-sm); }
.org-tile__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: var(--fw-heading-bold); font-size: 0.75rem; letter-spacing: 0.02em;
}
.org-tile--sm .org-tile__mark { width: 32px; height: 32px; font-size: 0.6875rem; }
/* Fix 2 (Round-2 handoff, session 12): real agency marks (NRCS, NDOW) in place of the
   text-monogram badge. White circle backing (not --color-accent) since both source
   files are full-color logos, not single-tone marks meant to sit on a tinted field. */
.org-tile__mark--logo { background: var(--color-on-primary); padding: 6px; }
.org-tile__mark--logo img { width: 100%; height: 100%; object-fit: contain; }
.org-tile__name { font-size: var(--fs-small); color: var(--color-text); line-height: 1.3; }

/* Reveal: adapts the winner's per-group data-reveal="group" to the shared
   .reveal--pre/.is-visible contract (assets/reveal.js already matches any
   [data-reveal] attribute value, including "group"). */
.org-wall__group.reveal--pre { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-slow) var(--motion-easing), transform var(--motion-slow) var(--motion-easing); }

.cwma-row { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cwma-chip { background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-full); padding: 6px var(--space-sm); font-size: var(--fs-small); font-weight: var(--fw-heading-semibold); }

.site-footer__partners { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-md) var(--space-lg); }
/* .site-footer__partners lives inside the now-solid-primary footer band (color-usage
   overhaul, session 12) -- its own heading + the "more" link need on-dark colors.
   .footer-partner-row li keeps its own opaque --color-surface chip background, so
   --color-text-muted inside it is unaffected (still reads against white, not primary). */
.site-footer__partners h4 { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--color-on-primary-muted); margin: 0 0 var(--space-sm); }
.footer-partner-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.footer-partner-row li { font-size: var(--fs-caption); color: var(--color-text-muted); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 6px 12px; background: var(--color-surface); }
.footer-partner-row__more { border: none !important; background: transparent !important; padding: 6px 0 !important; }
.footer-partner-row__more a { font-weight: var(--fw-heading-semibold); color: var(--color-accent); }
.footer-partner-row__more a:hover { color: var(--color-on-primary); }

/* ===== Icon set (brand-expression floor fix: zero icons existed sitewide) =====
   Inline SVG, currentColor-based so they inherit --color-secondary per the
   design system's own reserved icon/graphical use. */
.icon { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--color-secondary); }
/* --color-secondary (#007CBA) on the new solid-primary footer computes 2.06:1 --
   fails even the 3:1 nontext floor. Footer icons use --color-accent instead
   (7.07:1 on primary), matching the footer's other on-dark text/link color. */
.site-footer .icon { color: var(--color-accent); }
.site-footer__social a:hover .icon { color: var(--color-on-primary); }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: var(--space-xs); }
.site-nav__utility a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) 0; }

/* Numeric polish: tabular figures on prominent stat displays */
.stat-item .stat-number, .stat-pull__number { font-variant-numeric: tabular-nums; }

/* Display-type tracking (condensed headline face reads loose without it) */
h1, h2 { letter-spacing: -0.01em; }
.caption, .site-nav__utility a { letter-spacing: 0.02em; }

/* ===== About > Our Team: two-tier grid (tournament winner: about-team-card-grid) =====
   P0 fix: splits the flat 8-card grid into 6 bio-staff cards (fills exactly two full rows of 3 --
   no orphaned/stretched trailing row) plus a separate, deliberately quieter 2-person list for the
   staff with no sourced bio (Alysa Bailey, Leah Cripps), instead of stretching short content to
   match the tallest bio card. */
.team-group__heading { margin-top: var(--space-xl); }
.team-group__heading:first-of-type { margin-top: var(--space-lg); }
.team-grid { align-items: start; }
.team-card { position: relative; overflow: hidden; padding-top: calc(var(--space-lg) + 8px); }
/* Restrained top accent-bar -- brand color as a static 3px accent only, never a flooded card. */
.team-card::before { content: ""; position: absolute; top: 0; left: var(--space-lg); right: var(--space-lg); height: 3px; background: var(--color-primary); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.team-card p { margin: 0; }

/* Support-staff list: deliberately the quietest surface on the page for this section -- no accent
   tint, no shadow, no hover state -- so it reads as clearly secondary to the six bio cards above
   it (tinting it would make the least-detailed entries the most visually prominent). */
/* Session 13 fix: same orphaned-narrow-box defect as .gateway-lead-media --
   max-width with no centering, floating left in a wide container. */
.team-list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-sm); max-width: 560px; }
@media (min-width: 640px) { .team-list { grid-template-columns: repeat(2, 1fr); } }
.team-list__item { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.team-list__name { font-family: var(--font-heading); font-weight: var(--fw-heading-semibold); color: var(--color-on-surface); }
.team-list__title { color: var(--color-text-muted); font-size: var(--fs-small); }

/* Staggered reveal via the shared .reveal--pre/.is-visible contract (assets/reveal.js). */
.team-card.reveal--pre:nth-child(2) { transition-delay: 60ms; }
.team-card.reveal--pre:nth-child(3) { transition-delay: 120ms; }
.team-card.reveal--pre:nth-child(4) { transition-delay: 180ms; }
.team-card.reveal--pre:nth-child(5) { transition-delay: 240ms; }
.team-card.reveal--pre:nth-child(6) { transition-delay: 300ms; }

/* ===== Stories From the Field (tournament winner: testimonial-beneficiary-story) =====
   Side-by-side, zigzagged rows replacing the image-above-text .media-card stack; native
   <details>/<summary> disclosure replaces the 2 dead "Read the Full Story" links with real,
   already-sourced Our Work content instead of a bare link removal. */
.story-row { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; }
.story-row + .story-row { border-top: 1px solid var(--color-divider); }
.story-row__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-divider); }
.story-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
  .story-row { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); padding: var(--space-xl) 0; }
  .story-row--reverse .story-row__media { order: 2; }
  .story-row--reverse .story-row__body { order: 1; }
}
/* Fix 4 (Round-2 handoff, session 12): border-left was the exact side-stripe-border
   anti-pattern impeccable audit's own rules explicitly ban. Rewritten as a
   background-tinted block with a leading oversized quotation mark, also serving
   the Section Color Doctrine's "commit to a solid brand color" mandate rather
   than a subtle border accent. */
.story-row__quote { position: relative; margin: var(--space-sm) 0 0; padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl); background: var(--color-accent); border-radius: var(--radius-md); font-style: italic; color: var(--color-on-accent); }
.story-row__quote::before {
  content: "\201C";
  position: absolute;
  top: 0; left: var(--space-sm);
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: .55;
}
.story-row__quote cite { display: block; margin-top: var(--space-xs); font-style: normal; font-size: var(--fs-small); color: var(--color-on-accent); opacity: .75; }

/* Native <details>/<summary>: the [open] toggle needs zero JS; a pure-CSS grid-rows trick gives
   a smooth height reveal, with unsupported browsers just snapping open/closed (safe fallback). */
.story-disclosure { margin-top: var(--space-md); }
.story-disclosure__summary { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; list-style: none; font-family: var(--font-body); font-weight: var(--fw-heading-semibold); color: var(--color-primary); padding: var(--space-xs) 0; }
.story-disclosure__summary::-webkit-details-marker { display: none; }
.story-disclosure__summary:hover, .story-disclosure__summary:focus-visible { text-decoration: underline; }
.story-disclosure__chevron { transition: transform var(--motion-base) var(--motion-easing); flex-shrink: 0; }
.story-disclosure[open] .story-disclosure__chevron { transform: rotate(180deg); }
.story-disclosure__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-slow) var(--motion-easing); }
.story-disclosure[open] .story-disclosure__panel { grid-template-rows: 1fr; }
.story-disclosure__panel-inner { overflow: hidden; }
.story-disclosure__panel-inner p { margin-top: var(--space-sm); color: var(--color-text); }
.story-disclosure__link { display: inline-block; margin-top: var(--space-xs); }

/* Reveal via the shared .reveal--pre/.is-visible contract. */
.story-row.reveal--pre { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slow) var(--motion-easing), transform var(--motion-slow) var(--motion-easing); }
.story-row:nth-of-type(2).reveal--pre { transition-delay: 90ms; }

/* ===== Secondary-page hero set (tournament winner: secondary-page-hero-set) =====
   Replaces the shared 480px-fixed, byte-identical hero across About, Our Work, Programs,
   Get Involved, News & Events, Become a Member, Contact, Employment, Conference -- both
   lighter than Home's own bespoke hero (home-hero winner). Two variants: .hero--bleed
   (photo-forward, shorter fluid height, bottom-anchored) and .hero--framed (transactional
   hub pages, contained rounded card, no fixed height, no scrim). */
.hero-breadcrumb { margin-bottom: var(--space-sm); }
.hero-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; font-size: var(--fs-caption); font-weight: var(--fw-caption); }
.hero-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-xs); opacity: .55; }
.hero-breadcrumb a { text-decoration: none; }
.hero-breadcrumb a:hover { text-decoration: underline; }

.hero--bleed { min-height: clamp(320px, 24vw + 200px, 420px); align-items: flex-end; }
.hero--bleed .hero__content { padding-block: var(--space-lg) var(--space-2xl); }
.hero--bleed .hero-breadcrumb, .hero--bleed .hero-breadcrumb a { color: var(--color-on-primary); }
.hero--bleed .hero-breadcrumb a { opacity: .85; }
.hero--bleed .hero-breadcrumb a:hover { opacity: 1; }
/* A11y fix, scoped to on-photo hero context only: the global .btn-secondary (green border +
   green text on transparent) is unreadable over the dark-green hero-scrim. Given a translucent
   border/text-color-only fix still fell short of 4.5:1 at every position tested (verified via
   contrast.py: 2.94:1 -> 3.13-3.93:1, still below the text threshold), this uses a fully opaque
   solid fill instead of a scrim-dependent tint -- var(--color-on-primary) on var(--color-primary)
   is independently validated at 9.20:1, guaranteed regardless of whatever photo eventually fills
   the slot, not just an estimate against the placeholder. */
.hero--bleed .btn-secondary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.hero--bleed .btn-secondary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.hero--framed {
  display: grid; grid-template-columns: 1fr; align-items: center;
  min-height: 0; gap: var(--space-lg);
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .hero--framed { grid-template-columns: 1.05fr .95fr; gap: var(--space-2xl); padding: var(--space-2xl); } }
.hero--framed .hero__media { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-2); }
.hero--framed .hero__content { position: static; max-width: 560px; padding: 0; }
.hero--framed .hero__content h1 { color: var(--color-on-surface); }
.hero--framed .hero__content p { color: var(--color-text); }
.hero--framed .hero-breadcrumb, .hero--framed .hero-breadcrumb a { color: var(--color-text-muted); }
.hero--framed .hero-breadcrumb a:hover { color: var(--color-primary); }
/* bg-accent reserved for exactly one of the four framed pages (Become a Member) -- accent stays a
   deliberate, rationed touch, never a section flood. */
.hero--framed.bg-accent .hero__content h1,
.hero--framed.bg-accent .hero__content p,
.hero--framed.bg-accent .hero-breadcrumb,
.hero--framed.bg-accent .hero-breadcrumb a { color: var(--color-on-accent); }

/* Subtle load-in reveal, MOTION band 2-3: sequential fade/rise through the hero text stack only
   (breadcrumb -> h1 -> p -> ctas), motivated by reading order, never touching the photo. Pure CSS,
   gated on prefers-reduced-motion directly (no JS needed), layered on top of tokens.css's existing
   hard reduced-motion kill switch. */
@media (prefers-reduced-motion: no-preference) {
  .hero--bleed .hero__content > *,
  .hero--framed .hero__content > * { opacity: 0; transform: translateY(10px); animation: hero-reveal var(--motion-slow) var(--motion-easing) forwards; }
  .hero__content .hero-breadcrumb { animation-delay: 0ms; }
  .hero__content h1 { animation-delay: 80ms; }
  .hero__content p { animation-delay: 160ms; }
  .hero__content .hero__ctas { animation-delay: 240ms; }
}
@keyframes hero-reveal { to { opacity: 1; transform: translateY(0); } }

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }