/* ============================================================
   SEIZE THE MOMENT NOW — FRONTEND VISUAL TRANSFORMATION V2
   Media-first layer. Keeps existing PHP/data/Events/Gallery logic intact.
   ============================================================ */

:root{
  --v2-shadow: 0 24px 60px rgba(36,21,51,.14);
  --v2-shadow-soft: 0 16px 38px rgba(36,21,51,.10);
}

/* Shared interior intro media */
.intro-media{
  position:relative; width:min(760px,100%); margin:34px auto 0; border-radius:24px; overflow:hidden;
  border:1px solid rgba(217,203,236,.25); box-shadow:0 22px 55px rgba(0,0,0,.22);
  background:var(--plum-2);
}
.intro-media img{ width:100%; height:240px; object-fit:cover; display:block; }
.intro-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(36,21,51,0) 45%,rgba(36,21,51,.72)); pointer-events:none; }
.intro-media figcaption{ position:absolute; left:22px; right:22px; bottom:16px; z-index:2; color:var(--mist); font-size:.82rem; font-weight:700; letter-spacing:.02em; text-align:left; }

/* Home hero becomes visual-led rather than text-only */
body.page-index .hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr); align-items:center; gap:54px; width:min(1240px,100%); margin:0 auto; padding-left:32px; padding-right:32px; }
body.page-index .hero .content{ max-width:none; align-items:flex-start; text-align:left; }
body.page-index .hero .sub{ max-width:590px; }
body.page-index .hero .cta-row{ justify-content:flex-start; }
.hero-media{ position:relative; width:100%; max-width:560px; margin-left:auto; border-radius:30px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); border:1px solid rgba(217,203,236,.2); }
.hero-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(36,21,51,.82)); }
.hero-media-caption{ position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:var(--mist); }
.hero-media-caption span{ display:block; color:var(--hope-gold); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.15em; margin-bottom:7px; }
.hero-media-caption strong{ display:block; font-family:var(--font-display); font-size:1.25rem; line-height:1.25; }

.home-story-section,.home-media-section{ background:var(--paper); padding:96px 0; }
.home-story-section{ background:linear-gradient(180deg,var(--paper) 0%,#f5eef9 100%); }
.home-story-grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:64px; align-items:center; }
.home-story-copy h2,.home-media-section h2{ font-family:var(--font-display); font-weight:600; color:var(--charcoal); font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 18px; letter-spacing:-.02em; }
.home-story-copy h2 em{ color:var(--amethyst); }
.home-story-copy p:not(.kicker){ font-size:1rem; line-height:1.8; color:var(--ink-body); margin:0 0 24px; }
.kicker{ font-weight:800; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amethyst); margin:0 0 12px; }
.home-story-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.home-story-photo{ margin:0; position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--v2-shadow); }
.home-story-photo img{ width:100%; aspect-ratio:5/4; object-fit:cover; display:block; }
.home-story-photo figcaption{ position:absolute; left:16px; bottom:14px; background:rgba(36,21,51,.82); color:var(--mist); border-radius:999px; padding:8px 13px; font-size:.72rem; font-weight:700; }
.section-lede{ color:var(--ink-muted); font-size:.95rem; line-height:1.7; margin:12px auto 0; }
.home-media-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px; }
.home-media-card{ position:relative; min-height:300px; overflow:hidden; border-radius:22px; text-decoration:none; box-shadow:var(--v2-shadow-soft); border:1px solid var(--line); background:var(--ink-plum); }
.home-media-card img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; transition:transform .35s ease; }
.home-media-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(36,21,51,.9)); }
.home-media-card:hover img{ transform:scale(1.04); }
.home-media-card>div{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; color:var(--mist); }
.home-media-card strong,.home-media-card small{ display:block; }
.home-media-card strong{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:3px; }
.home-media-card small{ color:var(--mist-dim); font-size:.78rem; }
.media-badge{ position:absolute; top:16px; left:16px; z-index:2; padding:7px 11px; border-radius:999px; background:var(--hope-gold); color:var(--charcoal); font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

/* Shared image-led content bands */
.visual-grid-section,.resource-visual-band,.event-visual-band,.contact-visual-band,.donate-visual-band,.story-share-visual-band,.newsletter-visual-band,.blog-visual-band,.gallery-feature-band{ padding:82px 0; background:var(--paper-2); }
.visual-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.visual-tile{ margin:0; border-radius:22px; overflow:hidden; position:relative; min-height:360px; box-shadow:var(--v2-shadow-soft); background:var(--ink-plum); }
.visual-tile img{ width:100%; height:100%; min-height:360px; object-fit:cover; display:block; }
.visual-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(36,21,51,.78)); }
.visual-tile figcaption{ position:absolute; left:20px; bottom:18px; z-index:2; color:var(--mist); font-family:var(--font-display); font-size:1.25rem; }

.resource-visual-grid,.contact-visual-grid,.donate-visual-grid,.story-share-grid,.newsletter-visual-grid,.blog-visual-grid,.gallery-feature-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:50px; align-items:center; }
.resource-visual-photo,.contact-visual-photo,.donate-visual-photo,.story-share-photo,.newsletter-visual-photo,.gallery-feature-photo{ margin:0; overflow:hidden; border-radius:26px; box-shadow:var(--v2-shadow); position:relative; }
.resource-visual-photo img,.contact-visual-photo img,.donate-visual-photo img,.story-share-photo img,.newsletter-visual-photo img,.gallery-feature-photo img{ width:100%; aspect-ratio:5/4; object-fit:cover; display:block; }
.resource-visual-photo figcaption,.gallery-feature-photo figcaption{ position:absolute; left:18px; bottom:16px; background:rgba(36,21,51,.84); color:var(--mist); padding:8px 12px; border-radius:999px; font-size:.72rem; font-weight:700; }
.resource-visual-copy h2,.event-photo-copy h2,.contact-visual-copy h2,.donate-visual-copy h2,.story-share-copy h2,.newsletter-visual-copy h2,.blog-visual-copy h2,.gallery-feature-copy h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,3.5vw,2.8rem); line-height:1.1; color:var(--charcoal); margin:0 0 16px; }
.resource-visual-copy p:not(.kicker),.event-photo-copy p:not(.kicker),.contact-visual-copy p:not(.kicker),.donate-visual-copy p:not(.kicker),.story-share-copy p:not(.kicker),.newsletter-visual-copy p:not(.kicker),.blog-visual-copy p:not(.kicker),.gallery-feature-copy p:not(.kicker){ color:var(--ink-body); line-height:1.8; margin:0 0 22px; }
.event-photo-strip{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); border-radius:28px; overflow:hidden; box-shadow:var(--v2-shadow); background:var(--paper); }
.event-photo-strip img{ width:100%; height:100%; min-height:350px; object-fit:cover; display:block; }
.event-photo-copy{ padding:44px; align-self:center; }

/* Blog mosaic */
.blog-visual-band{ background:var(--paper); }
.blog-visual-mosaic{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.blog-visual-mosaic img{ width:100%; aspect-ratio:1/1.15; object-fit:cover; border-radius:20px; box-shadow:var(--v2-shadow-soft); }
.blog-visual-mosaic img:first-child{ transform:translateY(24px); }

/* Gallery feature */
.gallery-feature-band{ background:linear-gradient(135deg,var(--ink-plum),var(--plum-2)); }
.gallery-feature-copy h2,.gallery-feature-copy p:not(.kicker){ color:var(--mist); }
.gallery-feature-copy p:not(.kicker){ color:var(--mist-dim); }
.gallery-feature-photo img{ aspect-ratio:16/10; }

/* Make the public gallery feel like a media centre */
body.page-gallery .gallery-section{ padding-top:76px; }
body.page-gallery .gallery-item{ aspect-ratio:4/3; }
body.page-gallery .video-section{ padding-top:72px; }
body.page-gallery .video-card{ box-shadow:0 12px 30px rgba(36,21,51,.07); }
body.page-gallery .video-caption{ min-height:68px; display:flex; align-items:center; }
body.page-gallery .video-title{ font-size:.94rem; font-weight:700; }

/* Events: visually distinguish ongoing/upcoming/past while preserving existing forms */
body.page-events .content-area .card{ box-shadow:0 10px 28px rgba(36,21,51,.07); }
body.page-events .content-area .card:hover{ box-shadow:0 18px 40px rgba(122,75,176,.13); }

/* Contact and forms */
body.page-contact .contact-area,body.page-share-story .contact-area{ padding-top:76px; }
body.page-contact .form-panel,body.page-share-story .form-panel{ box-shadow:0 14px 38px rgba(36,21,51,.08); }

/* Donation */
body.page-donate .donate-visual-band{ background:linear-gradient(135deg,var(--paper),#f1e9f8); }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .home-media-card img{ transition:none; }
  .home-media-card:hover img{ transform:none; }
}

/* Responsive */
@media (max-width:980px){
  body.page-index .hero{ grid-template-columns:1fr; gap:34px; padding-top:54px; }
  body.page-index .hero .content{ align-items:center; text-align:center; }
  body.page-index .hero .cta-row{ justify-content:center; }
  .hero-media{ margin:0 auto; max-width:620px; }
  .hero-media img{ aspect-ratio:16/10; }
  .home-story-grid,.resource-visual-grid,.contact-visual-grid,.donate-visual-grid,.story-share-grid,.newsletter-visual-grid,.blog-visual-grid,.gallery-feature-grid{ grid-template-columns:1fr; gap:30px; }
  .home-story-copy{ max-width:700px; }
  .visual-grid-3{ grid-template-columns:1fr 1fr; }
  .event-photo-strip{ grid-template-columns:1fr; }
  .event-photo-strip img{ min-height:300px; }
  .event-photo-copy{ padding:34px; }
  .blog-visual-mosaic{ max-width:650px; }
}
@media (max-width:760px){
  .intro-media img{ height:190px; }
  .home-story-section,.home-media-section,.visual-grid-section,.resource-visual-band,.event-visual-band,.contact-visual-band,.donate-visual-band,.story-share-visual-band,.newsletter-visual-band,.blog-visual-band,.gallery-feature-band{ padding:66px 0; }
  .home-media-grid{ grid-template-columns:1fr 1fr; }
  .home-media-card-wide{ grid-column:1/-1; }
  .visual-grid-3{ grid-template-columns:1fr; }
  .visual-tile,.visual-tile img{ min-height:300px; }
}
@media (max-width:560px){
  body.page-index .hero{ padding-left:20px; padding-right:20px; }
  .hero-media{ border-radius:22px; }
  .hero-media-caption{ left:18px; right:18px; bottom:16px; }
  .hero-media-caption strong{ font-size:1.05rem; }
  .home-story-section,.home-media-section{ padding:60px 0; }
  .home-story-actions{ flex-direction:column; }
  .home-story-actions .btn{ width:100%; }
  .home-media-grid{ grid-template-columns:1fr; }
  .home-media-card-wide{ grid-column:auto; }
  .home-media-card,.home-media-card img{ min-height:280px; }
  .intro-media{ border-radius:18px; }
  .intro-media img{ height:165px; }
  .event-photo-copy{ padding:28px 24px; }
  .blog-visual-mosaic{ grid-template-columns:1fr 1fr; }
  .blog-visual-mosaic img:first-child{ transform:none; }
}

/* V2.2 visual refinement: stronger hero composition, fewer repeated booklet-like bands. */
body.page-index .hero{ min-height:620px; padding-top:64px; padding-bottom:72px; }
body.page-index .hero-media{ align-self:stretch; max-height:620px; }
body.page-index .hero-media img{ height:100%; min-height:520px; aspect-ratio:auto; }
body.page-index .hero .content{ padding-bottom:20px; }
.intro-media{ max-width:900px; }
.intro-media img{ height:300px; }
@media (max-width:980px){
  body.page-index .hero{ min-height:0; }
  body.page-index .hero-media{ max-height:none; }
  body.page-index .hero-media img{ min-height:0; height:auto; aspect-ratio:16/10; }
}
@media (max-width:560px){
  .intro-media img{ height:210px; }
}


/* ============================================================
   FRONTEND V2.3 — visual rhythm + less repetition
   ============================================================ */

/* Interior pages already have a dedicated visual section below the intro.
   Keep one strong image per page instead of repeating the same stock photo. */
body:not(.page-index) .intro-media{ display:none; }
body:not(.page-index) .intro{ padding-bottom:70px; }

/* Keep the desktop navigation on one clean line. */
.main-nav ul{ gap:0; }
.main-nav a{ padding-left:11px; padding-right:11px; font-size:.79rem; white-space:nowrap; }
.main-nav a[href="share-your-story.php"]{ white-space:nowrap; }

/* Homepage mission pillars: information-rich without adding more photography. */
.home-pillars-section{ padding:92px 0; background:var(--paper-2); }
.home-pillars-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.home-pillar{ position:relative; min-height:255px; padding:28px 24px 24px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--v2-shadow-soft); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.home-pillar:hover{ transform:translateY(-4px); box-shadow:var(--v2-shadow); border-color:rgba(122,75,176,.24); }
.home-pillar-accent{ background:linear-gradient(145deg,var(--ink-plum),var(--plum-2)); color:var(--mist); border-color:transparent; }
.pillar-number{ display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; background:rgba(122,75,176,.11); color:var(--amethyst); font-size:.68rem; font-weight:800; letter-spacing:.08em; margin-bottom:22px; }
.home-pillar-accent .pillar-number{ background:rgba(255,255,255,.1); color:var(--hope-gold); }
.home-pillar h3{ margin:0 0 10px; font-family:var(--font-display); font-size:1.35rem; color:var(--charcoal); }
.home-pillar-accent h3{ color:var(--mist); }
.home-pillar p{ margin:0 0 22px; color:var(--ink-body); font-size:.9rem; line-height:1.7; }
.home-pillar-accent p{ color:var(--mist-dim); }
.home-pillar a{ color:var(--amethyst); font-size:.76rem; font-weight:800; text-decoration:none; letter-spacing:.02em; }
.home-pillar-accent a{ color:var(--hope-gold); }
.home-pillar a::after{ content:'  →'; }

/* Better image treatment: let photography feel intentional, not like thumbnails. */
.hero-media img,.home-story-photo img,.visual-tile img,.resource-visual-photo img,.contact-visual-photo img,.donate-visual-photo img,.story-share-photo img,.newsletter-visual-photo img,.gallery-feature-photo img{ filter:saturate(.96) contrast(1.02); }
.intro-media{ display:none !important; }

/* The visual bands become the image-led moments on interior pages. */
.resource-visual-band,.event-visual-band,.contact-visual-band,.donate-visual-band,.story-share-visual-band,.newsletter-visual-band,.blog-visual-band,.gallery-feature-band{ position:relative; }
.resource-visual-band::before,.event-visual-band::before,.contact-visual-band::before,.donate-visual-band::before,.story-share-visual-band::before,.newsletter-visual-band::before,.blog-visual-band::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 8% 20%,rgba(122,75,176,.08),transparent 32%); }

@media (max-width:1180px){
  .main-nav a{ padding-left:8px; padding-right:8px; font-size:.75rem; }
  .home-pillars-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:980px){
  .main-nav a{ font-size:.79rem; }
  .home-pillars-section{ padding:76px 0; }
}

@media (max-width:560px){
  .home-pillars-grid{ grid-template-columns:1fr; }
  .home-pillar{ min-height:auto; padding:24px 20px; }
  body:not(.page-index) .intro{ padding-bottom:58px; }
}

/* ============================================================
   FRONTEND V2.4 — founder-led storytelling
   ============================================================ */
.hero-founder-media img{ object-position:center center; }
.founder-story-photo img{ object-position:center center; }
.founder-message-section{ padding:96px 0; background:var(--paper); }
.founder-message-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:56px; align-items:stretch; }
.founder-message-copy h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,4vw,3.35rem); line-height:1.05; margin:0 0 16px; color:var(--charcoal); }
.founder-lead{ font-family:var(--font-display); font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.45; color:var(--amethyst); margin:0 0 20px; }
.founder-message-copy > p:not(.kicker):not(.founder-lead){ color:var(--ink-body); line-height:1.8; max-width:690px; margin:0 0 16px; }
.text-link{ display:inline-block; margin-top:8px; color:var(--amethyst); font-weight:800; text-decoration:none; }
.text-link:hover{ text-decoration:underline; }
.founder-message-side{ background:linear-gradient(145deg,var(--ink-plum),var(--plum-2)); border-radius:28px; padding:38px; box-shadow:var(--v2-shadow); color:var(--mist); display:flex; flex-direction:column; justify-content:center; }
.founder-quote{ font-family:var(--font-display); font-size:clamp(1.55rem,2.8vw,2.2rem); line-height:1.25; font-style:italic; margin-bottom:34px; }
.founder-mini-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.founder-mini-grid div{ border-top:1px solid rgba(255,255,255,.18); padding-top:16px; }
.founder-mini-grid span{ display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:800; color:var(--hope-gold); margin-bottom:7px; }
.founder-mini-grid strong{ display:block; font-size:.88rem; line-height:1.65; color:var(--mist-dim); }
.home-goals-section{ padding:92px 0; background:var(--paper-2); }
.home-goals-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1000px; margin:0 auto; }
.home-goal{ padding:30px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--v2-shadow-soft); }
.home-goal > span{ display:inline-flex; width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center; background:rgba(122,75,176,.1); color:var(--amethyst); font-size:.7rem; font-weight:800; margin-bottom:18px; }
.home-goal h3{ font-family:var(--font-display); color:var(--charcoal); font-size:1.35rem; line-height:1.2; margin:0 0 10px; }
.home-goal p{ color:var(--ink-body); line-height:1.7; margin:0; }
.home-goals-actions{ display:flex; justify-content:center; margin-top:28px; }
@media (max-width:980px){
 .founder-message-grid{ grid-template-columns:1fr; gap:30px; }
 .founder-message-side{ max-width:760px; }
}
@media (max-width:680px){
 .founder-message-section,.home-goals-section{ padding:68px 0; }
 .home-goals-grid{ grid-template-columns:1fr; }
 .founder-message-side{ padding:30px 24px; border-radius:22px; }
}


/* ============================================================
   FRONTEND V2.5 — source-faithful content architecture
   ============================================================ */
.story-origin{ margin-top:12px; color:var(--ink-muted); font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.founder-story-section{ padding:96px 0 88px; background:var(--paper); }
.founder-story-layout{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr); gap:64px; align-items:start; }
.founder-story-copy{ max-width:760px; }
.founder-story-copy > p{ margin:0 0 18px; color:var(--ink-body); font-size:1rem; line-height:1.86; }
.founder-story-copy strong{ color:var(--charcoal); }
.founder-story-portrait{ margin:0; position:sticky; top:108px; }
.founder-story-portrait img{ width:100%; display:block; border-radius:26px; box-shadow:var(--v2-shadow); aspect-ratio:3/2; object-fit:cover; }
.founder-story-portrait figcaption{ margin-top:13px; color:var(--ink-muted); font-size:.78rem; line-height:1.6; }
.founder-callout{ margin:30px 0 26px; padding:28px 30px; border-left:4px solid var(--iris); border-radius:0 20px 20px 0; background:var(--paper-2); }
.founder-callout-title{ margin:0 0 8px !important; color:var(--amethyst) !important; font-size:.72rem !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.founder-callout p:not(.founder-callout-title){ margin:0 0 10px; font-family:var(--font-display); font-size:1.22rem; line-height:1.55; color:var(--charcoal); }
.founder-callout p:last-child{ margin-bottom:0 !important; font-size:1rem !important; font-family:var(--font-body); }
.story-action-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.about-next-section{ padding:82px 0; background:var(--paper-2); }
.about-next-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; }
.about-next-grid h2{ margin:0 0 12px; max-width:760px; font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); line-height:1.08; color:var(--charcoal); }
.about-next-grid p:not(.kicker){ max-width:720px; margin:0; color:var(--ink-body); line-height:1.75; }
.about-next-actions{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.about-next-actions .btn{ white-space:nowrap; }
.initiatives-focus-band{ padding:92px 0; background:var(--paper-2); }
.initiatives-focus-grid{ display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); gap:58px; align-items:center; }
.initiatives-focus-photo{ margin:0; }
.initiatives-focus-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:26px; box-shadow:var(--v2-shadow); }
.initiatives-focus-photo figcaption{ margin-top:12px; color:var(--ink-muted); font-size:.78rem; line-height:1.6; }
.initiatives-focus-copy h2{ margin:0 0 16px; font-family:var(--font-display); font-size:clamp(2rem,3.7vw,3rem); line-height:1.08; color:var(--charcoal); }
.initiatives-focus-copy > p:not(.kicker){ margin:0; color:var(--ink-body); line-height:1.8; }
.initiatives-focus-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.initiatives-focus-list > div{ padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.initiatives-focus-list span{ display:block; margin-bottom:8px; color:var(--amethyst); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.initiatives-focus-list strong{ display:block; margin-bottom:5px; color:var(--charcoal); font-size:.94rem; }
.initiatives-focus-list p{ margin:0; color:var(--ink-muted); font-size:.82rem; line-height:1.6; }
.blog-context-band{ padding:66px 0; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.blog-context-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:48px; align-items:center; }
.blog-context-grid h2{ margin:0; max-width:760px; font-family:var(--font-display); font-size:clamp(1.9rem,3.5vw,2.7rem); line-height:1.12; color:var(--charcoal); }
.blog-context-grid p:not(.kicker){ margin:0 0 20px; color:var(--ink-body); line-height:1.75; }
@media (max-width:980px){
  .founder-story-layout,.initiatives-focus-grid,.blog-context-grid{ grid-template-columns:1fr; gap:34px; }
  .founder-story-portrait{ position:static; max-width:700px; }
  .about-next-grid{ grid-template-columns:1fr; }
  .about-next-actions{ flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:680px){
  .founder-story-section,.initiatives-focus-band{ padding:68px 0; }
  .founder-callout{ padding:22px 20px; }
  .story-action-row,.about-next-actions{ flex-direction:column; }
  .story-action-row .btn,.about-next-actions .btn{ width:100%; }
  .initiatives-focus-list{ grid-template-columns:1fr; }
  .blog-context-band{ padding:58px 0; }
}


/* V2.6: connect the founder story to the practical work without adding another booklet-like card grid. */
.initiatives-story-bridge{padding:74px 0;background:var(--paper);}
.initiatives-story-bridge-inner{display:flex;align-items:center;justify-content:space-between;gap:42px;max-width:1100px;}
.initiatives-story-bridge-inner>div{max-width:760px;}
.initiatives-story-bridge h2{margin:0 0 14px;font-family:var(--font-display);font-weight:600;color:var(--charcoal);font-size:clamp(1.9rem,3.5vw,2.8rem);line-height:1.12;letter-spacing:-.02em;}
.initiatives-story-bridge p:not(.kicker){margin:0;color:var(--ink-muted);line-height:1.75;max-width:700px;}
@media (max-width:760px){.initiatives-story-bridge{padding:60px 0}.initiatives-story-bridge-inner{display:block}.initiatives-story-bridge-inner .btn{margin-top:24px}}


/* ============================================================
   FRONTEND V2.8 — calmer primary navigation
   Keep the main nav focused on the visitor journey; Newsletter
   remains available in the footer and dedicated page.
   ============================================================ */
@media (min-width:981px){
  .main-nav a[href="donate.php"]{
    margin-left:4px;
    padding-left:15px;
    padding-right:15px;
    border-radius:999px;
    background:var(--hope-gold);
    color:var(--charcoal);
    font-weight:800;
  }
  .main-nav a[href="donate.php"]:hover{
    background:var(--hope-gold-d);
    color:var(--charcoal);
  }
  .main-nav a[href="share-your-story.php"]{
    color:var(--amethyst);
    font-weight:800;
  }
}
@media (max-width:980px){
  .main-nav a[href="donate.php"]{
    color:var(--hope-gold);
    font-weight:800;
  }
  .main-nav a[href="share-your-story.php"]{
    font-weight:800;
  }
}

/* Keep the long-form Donate page readable on smaller screens. */
@media (max-width:700px){
  .page-donate .tier-grid{ grid-template-columns:1fr !important; }
}

/* V2.9 — keep donation amounts currency-neutral in the public UI. */
.donation-currency-note{
  max-width:680px;
  margin:10px auto 0;
  color:var(--ink-muted);
  font-size:.9rem;
  line-height:1.65;
}
.page-donate .custom-input{
  gap:0;
}


/* V3.0 — USD donation presentation and clearer custom amount field. */
.page-donate .custom-input{
  display:flex;
  align-items:center;
  border:1.5px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--mist);
}
.page-donate .custom-input:focus-within{
  border-color:var(--amethyst);
  box-shadow:0 0 0 3px rgba(122,75,176,.18);
}
.page-donate .currency-prefix{
  padding-left:15px;
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:800;
  color:var(--ink-muted);
}
.page-donate .custom-input input{
  border:0;
  border-radius:0;
  box-shadow:none;
}
.page-donate .custom-input input:focus{
  border:0;
  box-shadow:none;
}

/* ============================================================
   FRONTEND V4.3 — hero scale refinement
   Reduce oversized hero typography and photography while keeping
   the founder-led visual identity and responsive composition.
   ============================================================ */

/* Interior-page hero/intros: slightly quieter headline scale. */
.intro h1{
  font-size:clamp(1.7rem,3.15vw,2.2rem);
  line-height:1.28;
}

/* Home hero: retain hierarchy without letting the headline dominate the viewport. */
body.page-index h1{
  font-size:clamp(2.15rem,4.5vw,3.45rem);
  line-height:1.08;
  margin-bottom:20px;
}
body.page-index .hero .sub{
  font-size:clamp(.98rem,1.35vw,1.1rem);
  line-height:1.6;
  max-width:560px;
  margin-bottom:32px;
}

/* Home hero photo: smaller footprint and less aggressive portrait crop. */
body.page-index .hero-media{
  max-width:500px;
  max-height:540px;
}
body.page-index .hero-media img{
  aspect-ratio:5/4;
  height:auto;
  min-height:0;
  object-fit:cover;
}
body.page-index .hero-media-caption strong{ font-size:1.12rem; }

/* Image-led sections: keep photography prominent, but avoid oversized vertical blocks. */
.resource-visual-photo img,.contact-visual-photo img,.donate-visual-photo img,
.story-share-photo img,.newsletter-visual-photo img,.gallery-feature-photo img{
  aspect-ratio:16/10;
}

@media (max-width:980px){
  body.page-index h1{ font-size:clamp(2.05rem,6vw,3rem); }
  body.page-index .hero-media{ max-width:560px; max-height:none; }
  body.page-index .hero-media img{ aspect-ratio:16/10; }
}

@media (max-width:560px){
  .intro h1{ font-size:clamp(1.6rem,7vw,2rem); }
  body.page-index h1{ font-size:clamp(2rem,9vw,2.6rem); }
  body.page-index .hero-media img{ aspect-ratio:16/10; }
  body.page-index .hero-media-caption strong{ font-size:1rem; }
}

/* Spam-trap field: visible to bots, invisible to people. */
.honeypot-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }


/* ============================================================
   FRONTEND V4.26 — Gallery lightbox + resilient media
   Keep published photos inside a viewport-bounded viewer instead of
   opening raw full-resolution files in a new tab. Video thumbnails also
   receive a client-side fallback when an older uploaded thumbnail is no
   longer available.
   ============================================================ */
body.gallery-lightbox-open{ overflow:hidden; }
body.page-gallery .gallery-item{
  aspect-ratio:4/3;
  max-height:clamp(240px, 38vw, 460px);
}
body.page-gallery .gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,40px);
  background:rgba(20,12,28,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.gallery-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.gallery-lightbox__dialog{
  position:relative;
  width:min(1100px,94vw);
  height:min(88vh,900px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-lightbox__image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.gallery-lightbox__close,
.gallery-lightbox__prev,
.gallery-lightbox__next{
  position:absolute;
  z-index:2;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(36,21,51,.86);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.35rem;
  line-height:1;
}
.gallery-lightbox__close{ top:8px; right:8px; }
.gallery-lightbox__prev{ left:8px; top:50%; transform:translateY(-50%); }
.gallery-lightbox__next{ right:8px; top:50%; transform:translateY(-50%); }
.gallery-lightbox__close:focus-visible,
.gallery-lightbox__prev:focus-visible,
.gallery-lightbox__next:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
.gallery-lightbox__caption{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  max-width:min(760px,82vw);
  padding:8px 14px;
  border-radius:999px;
  background:rgba(36,21,51,.88);
  color:#fff;
  font-size:.8rem;
  line-height:1.4;
  text-align:center;
}
.gallery-lightbox__counter{
  position:absolute;
  left:8px;
  top:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(36,21,51,.76);
  color:#fff;
  font-size:.75rem;
}

@media (max-width:560px){
  body.page-gallery .gallery-item{ max-height:72vw; }
  .gallery-lightbox{ padding:12px; }
  .gallery-lightbox__dialog{ width:100%; height:88vh; }
  .gallery-lightbox__close{ top:4px; right:4px; }
  .gallery-lightbox__prev{ left:2px; }
  .gallery-lightbox__next{ right:2px; }
  .gallery-lightbox__caption{ bottom:2px; max-width:78vw; }
}

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

/* ============================================================
   FRONTEND V4.27 — preserve low-resolution photography
   Do not enlarge small source images to fill large decorative boxes.
   Contain the image at its natural scale where practical, preserving
   the original composition instead of cropping/forcing a cover crop.
   ============================================================ */
body.page-events .event-photo-strip{
  grid-template-columns:minmax(0,421px) minmax(0,1fr);
  align-items:center;
}
body.page-events .event-photo-strip > img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:421px;
  object-fit:contain;
  justify-self:center;
  background:var(--paper-2);
}

body.page-gallery .gallery-feature-photo,
body.page-resources .resource-visual-photo,
body.page-donate .donate-visual-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-2);
}
body.page-gallery .gallery-feature-photo img,
body.page-resources .resource-visual-photo img,
body.page-donate .donate-visual-photo img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:460px;
  aspect-ratio:auto;
  object-fit:contain;
}

/* The 421px event photograph should never be enlarged on the blog mosaic. */
body.page-blog .blog-visual-mosaic img[src*="gallery-4.webp"]{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--paper-2);
}

@media (max-width:980px){
  body.page-events .event-photo-strip{
    grid-template-columns:1fr;
  }
  body.page-events .event-photo-strip > img{
    width:auto;
    max-width:100%;
    max-height:421px;
    margin:0 auto;
  }
  body.page-gallery .gallery-feature-photo img,
  body.page-resources .resource-visual-photo img,
  body.page-donate .donate-visual-photo img{
    max-height:460px;
  }
}

@media (max-width:560px){
  body.page-events .event-photo-strip > img{
    width:100%;
    max-width:421px;
    max-height:none;
  }
  body.page-gallery .gallery-feature-photo img,
  body.page-resources .resource-visual-photo img,
  body.page-donate .donate-visual-photo img{
    width:100%;
    max-width:100%;
    max-height:none;
  }
}



/* ============================================================
   FRONTEND V4.28 — contact image sizing + search discoverability support
   Preserve the square source photograph instead of stretching/cropping it
   into a wide 16:10 box.
   ============================================================ */
body.page-contact .contact-visual-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-2);
}
body.page-contact .contact-visual-photo img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:600px;
  aspect-ratio:auto;
  object-fit:contain;
}
@media (max-width:980px){
  body.page-contact .contact-visual-photo img{
    max-height:600px;
  }
}
@media (max-width:560px){
  body.page-contact .contact-visual-photo img{
    width:100%;
    max-width:100%;
    max-height:none;
  }
}


/* ============================================================
   FRONTEND V4.29 — intrinsic photography guard
   Never stretch a source photograph just to fill a decorative box.
   The image keeps its native aspect ratio and is capped by the
   available column. This is especially important for older 421px
   square photographs such as the Events image.
   ============================================================ */
.resource-visual-photo img,
.event-photo-strip > img,
.contact-visual-photo img,
.donate-visual-photo img,
.story-share-photo img,
.newsletter-visual-photo img,
.blog-visual-photo img,
.gallery-feature-photo img{
  width:auto;
  max-width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  object-fit:contain;
}

/* Keep the containing photo frame visually balanced without forcing
   the image itself to fill every pixel of the frame. */
.resource-visual-photo,
.contact-visual-photo,
.donate-visual-photo,
.story-share-photo,
.newsletter-visual-photo,
.blog-visual-photo,
.gallery-feature-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-2);
}

/* The Events source is only 421×421. Do not upscale it on desktop. */
body.page-events .event-photo-strip > img{
  max-width:421px;
  max-height:421px;
}

/* Contact and other square/portrait source photos: keep them sharp and
   centered instead of turning them into a wide crop. */
body.page-contact .contact-visual-photo img,
body.page-donate .donate-visual-photo img,
body.page-share-story .story-share-photo img,
body.page-newsletter .newsletter-visual-photo img,
body.page-blog .blog-visual-photo img,
body.page-gallery .gallery-feature-photo img{
  max-height:620px;
}

@media (max-width:980px){
  .resource-visual-photo img,
  .event-photo-strip > img,
  .contact-visual-photo img,
  .donate-visual-photo img,
  .story-share-photo img,
  .newsletter-visual-photo img,
  .blog-visual-photo img,
  .gallery-feature-photo img{
    max-width:100%;
  }
}

@media (max-width:560px){
  body.page-events .event-photo-strip > img{
    width:auto;
    max-width:421px;
    max-height:421px;
  }
  .resource-visual-photo img,
  .contact-visual-photo img,
  .donate-visual-photo img,
  .story-share-photo img,
  .newsletter-visual-photo img,
  .blog-visual-photo img,
  .gallery-feature-photo img{
    width:auto;
    max-width:100%;
    max-height:none;
  }
}