/* ============================================================
   JH Digital — Page-specific styles (Phase 1.A)
   Only contains markup not covered by components.css. Universal
   patterns belong in components.css; this file is for layouts that
   exist on a single page or a tightly-scoped pair.
   ============================================================ */

/* ============================================================
   ABOUT — seven-movement timeline (movement 3)
   ============================================================ */
.about-timeline {
  position: relative;
  padding: 24px 0 48px;
  margin: 32px 0;
}
.about-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--rule) 90%);
}
.about-timeline__row {
  position: relative;
  padding: 16px 0 16px 56px;
}
.about-timeline__row:last-child { padding-bottom: 0; }
.about-timeline__dot {
  position: absolute;
  left: 6px; top: 22px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--gold-deep);
}
.about-timeline__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 6px;
}
.about-timeline__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.about-timeline__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
}

/* ============================================================
   ABOUT — three-home cards (movement 6)
   ============================================================ */
.home-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.home-card__photo {
  aspect-ratio: 4/3;
  background: var(--gray) center/cover no-repeat;
  position: relative;
}
.home-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20,33,61,0.35) 100%);
  pointer-events: none;
}
.home-card__photo-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 10px;
  background: rgba(20,33,61,0.5);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  z-index: 1;
}
.home-card__body { padding: 28px; }
.home-card__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.home-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.home-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.home-card__address {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  margin-bottom: 14px;
}
.home-card__address strong { color: var(--ink); }
.home-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 2px;
}
.home-card__link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ============================================================
   CONTACT — three address cards + contact form layout
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0 64px;
}
.contact-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.contact-card__home {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.contact-card__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.contact-card__addr {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.contact-card__addr p { color: var(--ink-soft); margin-bottom: 4px; }
.contact-card__phone,
.contact-card__email {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 6px;
}
.contact-card__phone:hover,
.contact-card__email:hover { color: var(--gold-deep); }
.contact-card__map {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 2px;
  font-weight: 600;
}

.contact-form-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  margin: 64px 0;
  align-items: start;
}
.contact-form-wrap__intro h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 16px; }
.contact-form-wrap__intro p { color: var(--ink-soft); }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .contact-form-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   GET-INVOLVED — pathway grid
   ============================================================ */
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.pathway-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pathway-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.pathway-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 24px;
}
.pathway-card__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.pathway-card__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 32px;
  flex: 1;
}
.pathway-card__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  align-self: flex-start;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.25s, border-color 0.25s;
}
.pathway-card__cta:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
@media (max-width: 800px) { .pathway-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PARTNERSHIP — tier cards
   ============================================================ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 48px 0;
}
.tier-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.tier-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.tier-card--featured {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}
.tier-card__badge {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.tier-card__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.tier-card__amount {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: var(--gold-deep);
  margin-bottom: 18px;
  line-height: 1;
}
.tier-card--featured .tier-card__amount { color: var(--gold-light); }
.tier-card__list {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
}
.tier-card--featured .tier-card__list { color: rgba(244, 238, 221, 0.78); }
.tier-card__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.tier-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 1.5px;
  background: var(--gold);
}

@media (max-width: 1024px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .tier-grid { grid-template-columns: 1fr; } }

/* ============================================================
   VOLUNTEERING — two-stream split
   ============================================================ */
.volunteer-streams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.volunteer-stream {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.volunteer-stream__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.volunteer-stream__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.volunteer-stream__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.volunteer-stream__list {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.volunteer-stream__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
}
.volunteer-stream__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 1.5px;
  background: var(--gold);
}
.volunteer-stream__form { margin-top: auto; }
.volunteer-stream__form summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--bone);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  transition: background 0.3s, transform 0.3s var(--ease);
}
.volunteer-stream__form summary::-webkit-details-marker { display: none; }
.volunteer-stream__form summary:hover { background: var(--gold); color: var(--ink); transform: translateY(-1px); }
.volunteer-stream__form[open] summary { background: var(--gold); color: var(--ink); }
.volunteer-stream__form-body { padding-top: 28px; }

@media (max-width: 1024px) { .volunteer-streams { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL pages (safeguarding / privacy / terms)
   ============================================================ */
.legal-toc {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  margin: 32px 0 48px;
}
.legal-toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.legal-toc ol {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}
.legal-toc li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.legal-toc li::marker { color: var(--gold); }
.legal-toc a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.legal-toc a:hover { border-bottom-color: var(--gold); }

.legal-section { margin: 48px 0; }
.legal-section h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
  scroll-margin-top: 100px;
}
.legal-section h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 24px 0 8px;
}
.legal-section p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.7; }
.legal-section ul { color: var(--ink-soft); padding-left: 22px; margin-bottom: 14px; }
.legal-section ul li { margin-bottom: 6px; line-height: 1.65; }
.legal-section ul li::marker { color: var(--gold); }
.legal-section .placeholder {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-soft);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ============================================================
   THANK-YOU page (post-submission landing)
   ============================================================ */
.thanks-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
  padding: 64px 56px;
  text-align: center;
  max-width: 720px;
  margin: 64px auto;
}
.thanks-card__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
}
.thanks-card__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 16px;
}
.thanks-card__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) { .thanks-card { padding: 40px 24px; } }

/* ============================================================
   ============== Phase 1.E — public CMS-driven pages ===========
   ============================================================ */

/* ---------- Photo placeholder (every img where a real photo will go) ---------- */
.jh-photo-placeholder {
  background: linear-gradient(135deg, var(--cream) 0%, var(--gray) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.jh-photo-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(45deg, rgba(212,163,58,0.06) 25%, transparent 25%, transparent 50%, rgba(212,163,58,0.06) 50%, rgba(212,163,58,0.06) 75%, transparent 75%, transparent);
  background-size: 24px 24px;
  pointer-events: none;
}
.jh-photo-placeholder__label {
  position: relative;
  padding: 8px 16px;
  background: rgba(20, 33, 61, 0.75);
  color: var(--bone);
  border-radius: 4px;
  letter-spacing: 0.18em;
}

/* ---------- Sponsor browse — steps + filter + grid + cards ---------- */
.sponsor-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.sponsor-step {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.sponsor-step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 18px;
}
.sponsor-step h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.sponsor-step p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) { .sponsor-steps { grid-template-columns: 1fr; } }

.sponsor-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin: 24px 0;
}
.sponsor-filter label { display: flex; flex-direction: column; gap: 6px; }
.sponsor-filter__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.sponsor-filter select,
.sponsor-filter input[type="search"] {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
}
.sponsor-filter input[type="search"] { cursor: text; }
.sponsor-filter select:focus,
.sponsor-filter input[type="search"]:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.sponsor-filter__search { grid-column: span 2; }
@media (max-width: 700px) { .sponsor-filter__search { grid-column: span 1; } }

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.sponsor-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .sponsor-grid, .sponsor-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .sponsor-grid, .sponsor-grid--3 { grid-template-columns: 1fr; } }

.sponsor-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  cursor: none;
}
.sponsor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
@media (max-width: 1024px), (hover: none) { .sponsor-card { cursor: pointer; } }

.sponsor-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream);
}
.sponsor-card__photo .jh-photo-placeholder { width: 100%; height: 100%; }
.sponsor-card__photo img,
.sponsor-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.4s;
  filter: saturate(0.92);
}
.sponsor-card:hover .sponsor-card__photo img,
.sponsor-card:hover .sponsor-card__img img { transform: scale(1.05); filter: saturate(1.04); }
.sponsor-card__badge {
  position: absolute; top: 14px; right: 14px;
  background: rgba(20, 33, 61, 0.78);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.sponsor-card--sponsored .sponsor-card__photo img { filter: saturate(0.7) brightness(0.9); }

.sponsor-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.sponsor-card__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.sponsor-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sponsor-card__cta { align-self: flex-start; }

/* ---------- Sponsor FAQ ---------- */
.sponsor-faq {
  margin-top: 32px;
}
.sponsor-faq details {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.sponsor-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  padding-right: 36px;
  position: relative;
  letter-spacing: -0.005em;
}
.sponsor-faq summary::-webkit-details-marker { display: none; }
.sponsor-faq summary::after {
  content: '+';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--cream);
  border-radius: 50%;
  color: var(--ink);
  font-weight: 600;
  transition: transform 0.3s, background 0.3s;
}
.sponsor-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--gold); }
.sponsor-faq summary:hover::after { background: var(--gold); }
.sponsor-faq details p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- Reassurance band (sponsor index) ---------- */
.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
}
.reassurance-tile {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: center;
}
.reassurance-tile__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  color: var(--gold-deep);
  line-height: 1;
  margin-bottom: 12px;
}
.reassurance-tile__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
@media (max-width: 900px) { .reassurance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reassurance-grid { grid-template-columns: 1fr; } }

/* ---------- Child profile (sponsor-detail.php) ---------- */
.child-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: var(--paper);
  padding: 80px 56px 60px;
  gap: 0;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 80px;   /* clear sticky nav */
}
.child-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(212,163,58,0.06) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(111,217,196,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.child-hero__photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-block);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.child-hero__photo .jh-photo-placeholder,
.child-hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.child-hero__panel {
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.child-hero__eyebrow { margin-bottom: 12px; }
.child-hero__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 12px;
}
.child-hero__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 32px;
}
.child-hero__amount {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.025em;
  color: var(--gold-deep);
  margin-bottom: 24px;
  line-height: 1;
}
.child-hero__amount span { font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.child-hero__sponsor-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 12px;
}
@media (max-width: 1024px) {
  .child-hero { grid-template-columns: 1fr; padding: 32px 24px 48px; gap: 24px; }
  .child-hero__panel { padding: 0; }
}

.child-home-photo {
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--cream);
}
.child-home-photo .jh-photo-placeholder,
.child-home-photo .child-home-photo__img,
.child-home-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Funds index — cards ---------- */
.fund-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.fund-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.fund-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.fund-card--featured { border-color: var(--gold); }
.fund-card__photo {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--cream);
  display: block;
}
.fund-card__photo .jh-photo-placeholder,
.fund-card__photo img,
.fund-card__photo .fund-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.fund-card:hover .fund-card__photo img,
.fund-card:hover .fund-card__photo .fund-card__img img { transform: scale(1.04); }
.fund-card__badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
}
.fund-card__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fund-card__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.fund-card__name a { color: inherit; text-decoration: none; }
.fund-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.fund-card__progress { display: flex; flex-direction: column; gap: 6px; }
.fund-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.fund-card__bar {
  height: 6px;
  background: var(--cream);
  border-radius: 3px;
  overflow: hidden;
}
.fund-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.fund-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 800px) { .fund-grid { grid-template-columns: 1fr; } }

/* ---------- Fund detail — hero + sticky donate sidebar + progress + prose ---------- */
.fund-hero {
  position: relative;
  height: clamp(280px, 38vh, 440px);
  margin-top: 80px;
  overflow: hidden;
}
.fund-hero__photo { position: absolute; inset: 0; }
.fund-hero__photo .jh-photo-placeholder,
.fund-hero__photo .fund-hero__img,
.fund-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.fund-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,33,61,0.15) 0%, rgba(20,33,61,0.55) 100%);
}
.fund-hero__inner {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 56px 40px;
  max-width: var(--max-content);
  margin: 0 auto;
  z-index: 1;
}
.fund-hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--bone);
  margin: 8px 0 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.fund-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: var(--max-text);
}
.fund-prose h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
  line-height: 1.05;
}
.fund-prose h3 { font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: var(--ink); margin: 1.2em 0 0.4em; }
.fund-prose p  { margin: 0 0 1em; color: var(--ink-soft); }
.fund-prose ul, .fund-prose ol { margin: 0 0 1em 1.4em; padding: 0; color: var(--ink-soft); }
.fund-prose blockquote { margin: 1.4em 0; padding-left: 24px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ink); }
.fund-prose img { max-width: 100%; height: auto; border-radius: var(--radius-photo); margin: 1.4em 0; }

.fund-progress__bar {
  position: relative;
  height: 16px;
  background: var(--cream);
  border-radius: 999px;
  overflow: visible;
  margin: 18px 0 32px;
}
.fund-progress__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 999px;
  transition: width 1.4s var(--ease);
}
.fund-progress__tick {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--white);
  border: 2px solid var(--rule);
  border-radius: 50%;
}
.fund-progress__tick.is-hit { background: var(--gold); border-color: var(--gold-deep); }
.fund-progress__tick-label {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  white-space: nowrap;
}

.fund-sticky { position: sticky; top: 100px; }
.fund-sticky__amount {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 4px;
  line-height: 1;
}
.fund-sticky__amount strong { color: var(--gold-deep); }
.fund-sticky__amount-of { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-top: 4px; }
.fund-sticky__bar { height: 6px; background: var(--cream); border-radius: 3px; overflow: hidden; margin: 12px 0 6px; }
.fund-sticky__bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.fund-sticky__pct { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); margin: 0 0 18px; }
.fund-sticky__note { font-size: 13px; line-height: 1.55; color: var(--ink-mute); margin: 14px 0 0; }
.fund-sticky__note a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-line); }

@media (max-width: 1024px) {
  .fund-hero__inner { padding: 0 24px 24px; }
  .fund-sticky { position: static; }
}

/* ---------- Stories archive ---------- */
.stories-filter {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 22px;
  margin-bottom: 32px;
}
.stories-filter__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stories-filter__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  min-width: 70px;
}
.stories-filter__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.stories-filter__chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border: 1px solid transparent;
}
.stories-filter__chip:hover  { background: var(--white); color: var(--ink); border-color: var(--rule); }
.stories-filter__chip.is-active { background: var(--ink); color: var(--bone); }

.story-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
  overflow: hidden;
  align-items: center;
}
.story-feature__photo {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
}
.story-feature__photo .jh-photo-placeholder,
.story-feature__photo .story-feature__img,
.story-feature__photo img { width: 100%; height: 100%; object-fit: cover; }
.story-feature__body { padding: 32px 40px 32px 0; }
.story-feature__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 8px 0 14px;
}
.story-feature__title a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.story-feature__title a:hover { border-bottom-color: var(--gold); }
.story-feature__dek {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.story-feature__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
@media (max-width: 1024px) {
  .story-feature { grid-template-columns: 1fr; gap: 0; }
  .story-feature__body { padding: 24px 28px 32px; }
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}
@media (max-width: 1024px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .story-grid { grid-template-columns: 1fr; } }

.story-card--archive .story-card__photo {
  aspect-ratio: 4/3;
  margin-bottom: 18px;
}
.story-card--archive .story-card__name {
  font-size: 22px;
  margin-bottom: 6px;
}
.story-card--archive .story-card__name a { color: inherit; text-decoration: none; }
.story-card__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

/* ---------- Story detail (article) ---------- */
.story-article { padding-top: 80px; }
.story-article__head {
  padding: 60px 0 32px;
  background: var(--paper);
  position: relative;
}
.story-article__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 12px 0 16px;
}
.story-article__dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.story-article__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}
.story-article__hero {
  margin: 0 auto 0;
  max-width: var(--max-content);
  padding: 0 24px;
}
.story-article__hero img,
.story-article__hero .story-article__hero-img,
.story-article__hero .jh-photo-placeholder {
  width: 100%;
  border-radius: var(--radius-block);
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.story-article__hero figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 12px;
}
.story-article__body {
  padding: 56px 0 48px;
  background: var(--paper);
}
.story-article__body .container--text {
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.story-article__body p { margin: 0 0 1.2em; color: var(--ink-soft); }
.story-article__body h2 { font-family: var(--font-sans); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin: 1.8em 0 0.5em; }
.story-article__body h3 { font-family: var(--font-sans); font-weight: 700; font-size: 22px; color: var(--ink); margin: 1.4em 0 0.5em; }
.story-article__body strong, .story-article__body b { color: var(--ink); font-weight: 600; }
.story-article__body em, .story-article__body i { font-style: italic; }
.story-article__body a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-line); }
.story-article__body ul, .story-article__body ol { margin: 0 0 1.2em 1.6em; padding: 0; }
.story-article__body img { max-width: 100%; border-radius: var(--radius-photo); margin: 1.6em 0; }
.story-article__body blockquote.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
  margin: 56px 0;
  padding: 24px 32px;
  position: relative;
  border: none;
}
.story-article__body blockquote.pull-quote::before,
.story-article__body blockquote.pull-quote::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 32px; height: 2px;
  background: var(--gold);
}
.story-article__body blockquote.pull-quote::before { top: 0; }
.story-article__body blockquote.pull-quote::after  { bottom: 0; }
.story-article__body blockquote.pull-quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.story-article__donate { padding: 16px 0 56px; background: var(--paper); }
.story-article__share  { padding: 0 0 80px; background: var(--paper); }

.story-share { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--rule); }
.story-share__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.story-share__link {
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.story-share__link:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- Impact page ---------- */
.impact-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.impact-counter {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 32px 28px;
}
.impact-counter__num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--ink), var(--ink-soft));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.impact-counter__rule {
  width: 32px; height: 2px;
  background: var(--gold);
  margin: 16px 0;
}
.impact-counter__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 1024px) { .impact-counters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .impact-counters { grid-template-columns: 1fr; } }

.impact-alloc { margin-top: 32px; }
.impact-alloc__list { list-style: none; padding: 0; margin: 0; }
.impact-alloc__row {
  display: grid;
  grid-template-columns: 1.4fr 3fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.impact-alloc__row:last-child { border-bottom: none; }
.impact-alloc__label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.impact-alloc__bar {
  position: relative;
  height: 14px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
}
.impact-alloc__fill {
  position: absolute; inset: 0;
  width: 0%;
  background: var(--bar);
  border-radius: 999px;
  transition: width 1.6s var(--ease);
}
.impact-alloc__row.in-view .impact-alloc__fill { width: var(--pct); }
.impact-alloc__pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  min-width: 50px;
  text-align: right;
}
@media (max-width: 800px) {
  .impact-alloc__row { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .impact-alloc__bar { grid-column: 1 / -1; }
}

.impact-reports { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.impact-reports a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-line); }

.impact-governance h2 { font-family: var(--font-sans); font-weight: 800; font-size: 24px; color: var(--ink); margin: 1.4em 0 0.4em; }
.impact-governance h3 { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--ink); margin: 1.2em 0 0.3em; }
.impact-governance p  { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 0.8em; }

.impact-docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.impact-doc {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.impact-doc:hover { transform: translateY(-2px); border-color: var(--gold); }
.impact-doc__title { font-family: var(--font-sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--ink); }
.impact-doc__sub   { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.impact-doc--placeholder { background: var(--cream); border-style: dashed; cursor: default; }
.impact-doc--placeholder:hover { transform: none; border-color: var(--rule); }
@media (max-width: 700px) { .impact-docs { grid-template-columns: 1fr; } }

/* ============================================================
   ============== Phase 2.B — donate page ====================
   ============================================================ */

.donate-hero {
  padding: 140px 56px 60px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.donate-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(212,163,58,0.08) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(111,217,196,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.donate-hero .container { position: relative; z-index: 1; }
.donate-hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 16px 0 16px;
}
.donate-hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
}
.donate-test-banner {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 20px;
  background: rgba(212, 163, 58, 0.12);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 1px dashed var(--gold);
}
@media (max-width: 1024px) { .donate-hero { padding: 100px 24px 40px; } }

.donate-error {
  background: #FBF6F0;
  border-left: 4px solid #B85C30;
  padding: 14px 20px;
  margin: 16px 0;
  border-radius: 0 6px 6px 0;
  color: #98461F;
  font-size: 14px;
  line-height: 1.55;
}
.donate-error--mute { background: var(--cream); border-left-color: var(--ink-mute); color: var(--ink-soft); }
.donate-error--inline {
  display: block;
  background: transparent;
  border-left: none;
  padding: 4px 0;
  margin: 4px 0 0;
  color: #B85C30;
  font-size: 12px;
}
.donate-form .has-error input,
.donate-form .has-error select { border-color: #B85C30; }

.donate-section { padding: 48px 56px; }
.donate-section__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.donate-section__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 640px;
}
@media (max-width: 1024px) { .donate-section { padding: 32px 24px; } }

/* ----- 1. Amount ----- */
.donate-amount__presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.donate-pill { position: relative; display: inline-block; cursor: pointer; }
.donate-pill input { position: absolute; opacity: 0; pointer-events: none; }
.donate-pill__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* Hover: gold fill, ink text. Lift slightly. NEVER let text colour
   match the background — text stays --ink throughout. */
.donate-pill:hover .donate-pill__inner {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(212,163,58,0.55);
}
/* Checked: ink fill, bone text. Distinct from hover. */
.donate-pill input:checked + .donate-pill__inner {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.donate-pill:hover input:checked + .donate-pill__inner,
.donate-pill input:checked + .donate-pill__inner:hover {
  background: var(--ink);          /* keep checked colours; gold ring around it */
  color: var(--bone);
  border-color: var(--gold);
  box-shadow: 0 8px 24px -10px rgba(20,33,61,0.55);
}
.donate-pill input:focus-visible + .donate-pill__inner {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
.donate-pill--lg .donate-pill__inner {
  padding: 22px 28px;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 280px;
}
.donate-pill--lg .donate-pill__inner strong { font-weight: 800; font-size: 18px; }
.donate-pill--lg .donate-pill__inner span    { font-weight: 500; font-size: 13px; color: var(--ink-soft); }
.donate-pill--lg input:checked + .donate-pill__inner span { color: var(--bone); opacity: 0.78; }

.donate-amount__custom { display: flex; gap: 12px; max-width: 380px; margin-top: 16px; align-items: stretch; }
.donate-amount__custom input,
.donate-amount__custom select {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink);
  padding: 14px 20px;
  letter-spacing: -0.01em;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), border-width 0.05s linear;
}
.donate-amount__custom input  { flex: 1; min-width: 0; border-radius: 999px; padding-left: 24px; }
.donate-amount__custom select {
  flex: 0 0 auto;
  border-radius: 999px;
  padding-right: 38px;
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2314213D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px;
  cursor: pointer;
}
.donate-amount__custom input:focus,
.donate-amount__custom select:focus {
  outline: none;
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--gold-soft);
}
.donate-amount__custom input:hover,
.donate-amount__custom select:hover { border-color: var(--gold-deep); }
.donate-amount__kes { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-mute); }

/* ----- 2. Frequency ----- */
.donate-frequency { display: flex; gap: 16px; flex-wrap: wrap; }
.donate-frequency .donate-pill { flex: 1 1 280px; }
@media (max-width: 600px) { .donate-frequency .donate-pill { flex: 1 1 100%; } }

/* ----- 3. Funds ----- */
.donate-funds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.donate-fund-card {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.donate-fund-card:hover { border-color: var(--gold); }
.donate-fund-card input { margin-top: 4px; flex: 0 0 auto; }
.donate-fund-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.donate-fund-card div strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.donate-fund-card div p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.donate-fund-card__progress { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); }
.donate-fund-card__bar { height: 4px; background: var(--cream); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.donate-fund-card__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 2px; }

/* ----- 4. Donor fields ----- */
.donate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.donate-fields label { display: flex; flex-direction: column; gap: 6px; }
.donate-fields__full { grid-column: 1 / -1; }
.donate-fields__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.donate-fields__hint { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0; color: var(--ink-mute); text-transform: none; font-weight: 500; margin-left: 6px; }
.donate-fields input,
.donate-fields select {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.donate-fields input:focus,
.donate-fields select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
@media (max-width: 700px) { .donate-fields { grid-template-columns: 1fr; } }

/* ----- 5. Payment method ----- */
.donate-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.donate-pay__btn {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}
.donate-pay__btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.donate-pay__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.donate-pay__btn strong { font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); }
.donate-pay__btn span   { font-size: 13px; color: var(--ink-soft); line-height: 1.45; font-weight: 500; }
.donate-pay__btn--card::before,
.donate-pay__btn--paypal::before,
.donate-pay__btn--mpesa::before {
  content: '';
  position: absolute;
  top: 16px; right: 18px;
  width: 14px; height: 14px;
  border-radius: 50%;
}
.donate-pay__btn--card::before   { background: #635bff; }
.donate-pay__btn--paypal::before { background: #003087; }
.donate-pay__btn--mpesa::before  { background: #1a874b; }
.donate-pay__note { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: #B85C30; }
@media (max-width: 800px) { .donate-pay { grid-template-columns: 1fr; } }

/* ============================================================
   /donate — polish overrides (Phase 1.E + post-launch polish)
   These supersede the older defaults above. Keep above rules in
   place so nothing breaks if a markup change reverts.
   ============================================================ */

/* Fund cards: gold accent stripe at top + tighter typography hierarchy. */
.donate-fund-card {
  position: relative;
  flex-direction: column;
  padding-top: 26px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.donate-fund-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  opacity: 0.9;
}
.donate-fund-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.donate-fund-card:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-card);
}
.donate-fund-card input { position: absolute; top: 14px; right: 14px; margin: 0; }
.donate-fund-card div { width: 100%; }
.donate-fund-card div strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.donate-fund-card__progress {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.donate-fund-card__bar {
  height: 5px;
  background: var(--cream);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.donate-fund-card__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 999px;
  transform-origin: left;
  animation: donateBarReveal 1.2s var(--ease) both;
}
@keyframes donateBarReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Donor detail inputs: 1.5px ink → 2px gold on focus + floating label. */
.donate-fields label { position: relative; }
.donate-fields input,
.donate-fields select {
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 14px 14px;
  font-size: 15px;
  font-weight: 500;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.18s var(--ease), border-width 0.05s linear,
              box-shadow 0.18s var(--ease);
}
.donate-fields input::placeholder { color: var(--ink-mute); }
.donate-fields input:hover,
.donate-fields select:hover { border-color: var(--gold-deep); }
.donate-fields input:focus,
.donate-fields select:focus {
  outline: none;
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--gold-soft);
  /* Compensate for the 0.5px border growth so text doesn't shift */
  padding: 13.5px 13.5px;
}
.donate-fields .has-error input,
.donate-fields .has-error select { border-color: #B85C30; }

/* Payment buttons: brand glyph (rendered as inline SVG in markup), bigger
   stack, hover lifts -2px with shadow. The base styles already have border
   + transform; this overrides the corner-dot decoration with a glyph slot. */
.donate-pay__btn {
  align-items: flex-start;
  padding: 26px 28px 24px;
  gap: 6px;
  border-width: 1.5px;
  border-radius: 12px;
  background: var(--white);
}
.donate-pay__btn:hover:not(:disabled) {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(20,33,61,0.35);
}
.donate-pay__btn:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
/* Hide the old corner-dot indicator — replaced by an inline glyph in markup */
.donate-pay__btn--card::before,
.donate-pay__btn--paypal::before,
.donate-pay__btn--mpesa::before { display: none; }
.donate-pay__btn-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  border-radius: 6px;
  background: var(--cream);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.donate-pay__btn--card   .donate-pay__btn-glyph { background: #635bff; color: #fff; }
.donate-pay__btn--paypal .donate-pay__btn-glyph { background: #003087; color: #fff; }
.donate-pay__btn--mpesa  .donate-pay__btn-glyph { background: #1a874b; color: #fff; }

/* Reassurance band specific tuning when used inside the donate flow. */
.donate-form + .reassurance-band,
.donate-reassurance { margin-top: 0; }
.donate-reassurance .reassurance-band__item strong {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-transform: none;
  font-size: 12px;
  margin-right: 4px;
}

/* ============================================================
   Thank-you M-Pesa pending state
   ============================================================ */
.thanks-mpesa {
  margin: 24px auto 0;
  max-width: 420px;
  padding: 24px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  text-align: center;
}
.thanks-mpesa__spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--rule);
  border-top-color: var(--gold);
  margin: 0 auto 14px;
  animation: spin 0.8s linear infinite;
}
.thanks-mpesa__status { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px; }
.thanks-mpesa__hint   { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.thanks-card[data-status="paid"] .thanks-card__icon    { background: var(--teal); }
.thanks-card[data-status="failed"] .thanks-card__icon,
.thanks-card[data-status="timeout"] .thanks-card__icon { background: #B85C30; color: #fff; }

/* ============================================================
   ============== Polish pass — page-specific tuning ===========
   ============================================================ */

/* ---------- /sponsor: asymmetric middle-card lift on first row.
   Picks up the homepage v5 story-card grid rhythm — desktop only. */
@media (min-width: 1025px) {
  .sponsor-grid > .sponsor-card:nth-child(3n+2):nth-child(-n+3) {
    transform: translateY(-48px);
  }
  .sponsor-grid > .sponsor-card:nth-child(3n+2):nth-child(-n+3):hover {
    transform: translateY(-52px);   /* keep the lift on hover, deepen subtly */
  }
}

/* ---------- /sponsor: card hover states get the v5 saturation pop. */
.sponsor-card { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.sponsor-card .sponsor-card__cta { transition: background 0.3s var(--ease), color 0.3s var(--ease); }

/* ---------- /sponsor: filter row → polished pill row.            */
.sponsor-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.sponsor-filter select,
.sponsor-filter input[type="search"] {
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  transition: border-color 0.18s var(--ease), border-width 0.05s linear, box-shadow 0.18s var(--ease);
}
.sponsor-filter select:focus,
.sponsor-filter input[type="search"]:focus {
  outline: none;
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--gold-soft);
}

/* ---------- /sponsor: FAQ accordion — gold + tighter type. */
.sponsor-faq summary { transition: color 0.2s var(--ease), padding-left 0.2s var(--ease); }
.sponsor-faq summary:hover { color: var(--gold-deep); padding-left: 4px; }
.sponsor-faq details[open] summary { color: var(--gold-deep); }

/* ============================================================
   /funds — featured fund detail on top + animated progress bars
   ============================================================ */
.fund-card { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); }
.fund-card--featured {
  border-color: var(--gold);
  box-shadow: 0 24px 60px -22px rgba(212,163,58,0.35);
}
.fund-card--featured::before {
  /* gold accent rule across the top of the featured fund */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  z-index: 2;
}
.fund-card { position: relative; }
.fund-card__bar { overflow: hidden; }
.fund-card__bar-fill {
  /* When the card enters the viewport, IntersectionObserver in core.js adds
     .in-view to the .reveal ancestor, which lets this bar animate from 0 → target. */
  transform-origin: left;
  transition: width 1.4s var(--ease);
}
.fund-card.reveal:not(.in-view) .fund-card__bar-fill { width: 0 !important; }

/* ============================================================
   /stories — featured story overlap card matching v5
   ============================================================ */
.story-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  background: var(--white);
  border-radius: var(--radius-block);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--rule);
}
.story-feature__photo {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  display: block;
}
.story-feature__photo img,
.story-feature__photo .story-feature__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter 0.6s;
  filter: saturate(0.95);
}
.story-feature:hover .story-feature__photo img { transform: scale(1.04); filter: saturate(1.08); }
.story-feature__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(20,33,61,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.story-feature__body {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  position: relative;
}
.story-feature__body::before {
  /* gold accent rail on the body side, mirroring v5 hero card */
  content: '';
  position: absolute;
  top: 32px; bottom: 32px; left: 0;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}
.story-feature__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 12px 0 14px;
}
.story-feature__title a { color: inherit; text-decoration: none; }
.story-feature__title a:hover { color: var(--gold-deep); }
.story-feature__dek {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.story-feature__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
@media (max-width: 900px) {
  .story-feature { grid-template-columns: 1fr; }
  .story-feature__body { padding: 32px 28px; }
  .story-feature__body::before { left: 20px; right: 20px; top: 0; bottom: auto; height: 3px; width: auto; }
}

/* ---------- /stories filter chips — clearer hover. */
.stories-filter__chip {
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.stories-filter__chip:hover {
  background: var(--gold);
  color: var(--ink);          /* explicit — never matches background */
  border-color: var(--gold);
}
.stories-filter__chip.is-active:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ============================================================
   /contact — polished form inputs + map-pin echo on cards
   ============================================================ */
.contact-card { position: relative; overflow: hidden; }
.contact-card::before {
  /* small map-pin glyph in the corner, echoing the homepage map block */
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(212,163,58,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.contact-card::after {
  content: '';
  position: absolute;
  top: 22px; right: 22px;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px -2px rgba(212,163,58,0.6);
}
/* Contact form's actual inputs already pick up form-input styles via
   components.css, but the unstyled `.contact-form input` selectors shipped
   with Phase 1.A use the .form-input class — make sure the polish block
   in components.css applies. Reinforce here for clarity. */
.contact-form .form-input,
.contact-form .form-textarea {
  border: 1.5px solid var(--ink);
  background: var(--white);
}
.contact-form .form-input:hover,
.contact-form .form-textarea:hover { border-color: var(--gold-deep); }

/* ============================================================
   Polish — CMS empty states picking up the new component class.
   .adm-empty already exists in admin.css; rather than duplicate,
   we widen its style with a gold-glyph variation that callers can
   opt into by adding .adm-empty--designed.
   ============================================================ */
.adm-empty { padding: 40px 28px; }
.adm-empty--designed {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
  position: relative;
  overflow: hidden;
}
.adm-empty--designed::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,163,58,0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================================
   /donate — v5 overlap-gold-card hero tuning
   The .hero / .hero__card / .hero__photo-wrap classes (defined in
   components.css) carry the homepage v5 hero pattern. These
   donate-specific overrides shrink the headline so the wordier
   donate copy still fits the gold card cleanly, and add a smooth
   scroll target for the "Choose your gift" CTA.
   ============================================================ */
.donate-hero-v5 { padding-bottom: 100px; }
.donate-hero-v5__h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.donate-hero-v5__card {
  /* Slightly wider card so the longer donate headline stays balanced */
  width: 46%;
  padding: 48px 44px;
}
@media (max-width: 1024px) {
  .donate-hero-v5__card { width: calc(100% - 32px); padding: 36px 28px; }
  .donate-hero-v5__h1   { font-size: clamp(30px, 7vw, 44px); }
}
html { scroll-padding-top: 88px; }   /* sticky-nav offset for in-page anchors */

/* ============================================================
   /sponsor — child cards matching the homepage v5 story-card aesthetic
   ============================================================ */

/* Glassmorphism location pill at top-left of the photo. */
.sponsor-card__photo-meta {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 6px 12px;
  background: rgba(20, 33, 61, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Existing "Sponsored" badge already gold — push it to top-right so it
   doesn't collide with the new location pill at top-left. */
.sponsor-card__badge { right: 14px; left: auto; }

/* Photo overlay — gradient bottom for legibility, matches story-card v5. */
.sponsor-card__photo {
  position: relative;
}
.sponsor-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,33,61,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Name — Outfit 800 large, matches v5 story-card__name. */
.sponsor-card__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

/* Meta — JetBrains Mono uppercase tracked. */
.sponsor-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* CTA — ghost pill with ink-fill grow on hover, mirrors story-card__btn from v5. */
.sponsor-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  text-decoration: none;
}
.sponsor-card__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scale(0);
  border-radius: var(--radius-pill);
  transition: transform 0.4s var(--ease);
}
.sponsor-card__cta span { position: relative; z-index: 1; transition: color 0.3s var(--ease); }
.sponsor-card__cta:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.sponsor-card__cta:hover::before { transform: scale(1.5); }
.sponsor-card__cta:hover span    { color: var(--bone); }   /* explicit — never matches background */
.sponsor-card__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--gold-soft);
  border-color: var(--gold);
}