/* ============================================================
   Pronabananda Sevashram — Sacred Modernism design system.
   Warm devotional palette on an editorial-minimal structure.
   Single source of truth for color/type/spacing tokens; theme-
   invert primitive for centrally-controlled dark sections.
   No build step (plain CSS). Token source: docs/03-visual-identity.md §7.
   ============================================================ */
:root {
  /* --- Color: accent (Sacred Saffron) --- */
  --c-accent: #D97706;            /* was #FF9933 — Sacred Saffron (doc 03 §7.1) */
  --c-accent-strong: #B45309;     /* was #E8791A — Deep Saffron (hover, absorbs maroon role) */
  --c-on-accent: #1F2937;         /* was #2B1508 — Deep Charcoal on saffron (≈4.6:1, WCAG AA) */

  /* --- Color: legacy aliases (kept for migration; retire in Sprint 02 sweep) --- */
  --c-maroon: #B45309;            /* was #7A2E1D — now aliases accent-strong; deprecated */
  --c-ink: #1F2937;               /* was #241712 — now aliases --c-text */
  --c-ink-strong: #1F2937;        /* was #140D09 — differentiation via weight, not color */
  --c-gray-500: #6B7280;          /* was #8A7666 — now aliases --c-text-muted */

  /* --- Color: surfaces --- */
  --c-surface: #FAF7F2;           /* was #FBF6EF — Warm Ivory (doc 03 §7.1) */
  --c-surface-raised: #FFFFFF;    /* unchanged — soft white for cards/header */
  --c-surface-alt: #F3EDE3;       /* was #F2E9DC — Sand Beige (doc 03 §7.1) */

  /* --- Color: text --- */
  --c-text: #1F2937;              /* was #2B2118 — Deep Charcoal (doc 03 §7.1) */
  --c-text-soft: #4B5563;         /* was #6B5B4D — cool-gray secondary (doc 03 §7.1) */
  --c-text-muted: #6B7280;        /* new — cool-gray muted for tertiary/legal text */

  /* --- Color: structural --- */
  --c-border: #E5E7EB;            /* was #E4D5C2 — cool-gray border (doc 03 §7.1) */
  --c-focus: #1c5fd6;             /* unchanged — functional a11y color, not brand */

  /* --- Color: semantic (new — prepared for future use) --- */
  --c-error: #DC2626;             /* new — error/validation states */
  --c-success: #2F6F4F;           /* new — Forest Green; trust/verified markers */
  --c-warning: #F59E0B;           /* new — warning states */
  --c-gold: #EAB308;              /* new — Temple Gold; honors/badges only (see doc 03 §5) */
  --c-green: #2F6F4F;             /* new — Forest Green alias */

  /* --- Composite tokens --- */
  --card-border: 1px solid var(--c-border);
  --card-shadow: 0 2px 14px rgba(31, 41, 55, 0.07); /* was rgba(43,23,8,.07) — tint follows new charcoal */

  /* --- Typography (unchanged from Phase A) --- */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --fs-100: 0.833rem; --fs-200: 1rem; --fs-300: 1.2rem; --fs-400: 1.5rem;
  --fs-500: 1.8rem; --fs-600: 2.25rem; --fs-700: 2.75rem; --fs-800: 3.3rem;
  --lh-tight: 1.12; --lh-body: 1.6;

  /* --- Spacing (unchanged from Phase A) --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:7rem;

  /* --- Radius (unchanged from Phase A) --- */
  --r-sm:4px; --r-md:6px; --r-card:8px; --r-pill:999px;

  /* --- Structure (unchanged) --- */
  --container-max:1200px; --header-h:72px;

  /* --- Motion (unchanged from Phase C) --- */
  --ease:cubic-bezier(0.4,0,0.2,1); --dur-fast:.2s; --dur-med:.4s;

  /* --- Z-index (unchanged) --- */
  --z-header:100; --z-menu:200;
}

/* Dark band: charcoal-derived per doc 03 §7.3.
   Base: #1F2937. Raised/alt are alpha-overlay tints. Seam: new saffron tone. */
.theme-invert {
  --c-surface: #1F2937;                        /* was #241712 — Deep Charcoal base */
  --c-surface-raised: rgba(255,255,255,.05);   /* was #2E2018 — subtle lift on dark */
  --c-surface-alt: rgba(255,255,255,.09);      /* was #3A2A1F — alternate on dark */
  --c-text: #FAF7F2;                           /* was #F7EFE6 — Warm Ivory on dark */
  --c-text-soft: rgba(250,247,242,.72);        /* was #D8C4B0 */
  --c-border: rgba(250,247,242,.16);           /* was rgba(255,230,210,.18) */
  --c-ink: #FAF7F2;                            /* alias — follows --c-text */
  --c-ink-strong: #FFFFFF;                     /* unchanged */
  background: var(--c-surface); color: var(--c-text);
  position: relative;
}
.theme-invert::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,119,6,.5), transparent); /* was rgba(255,153,51,.5) */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:112.5%;}
body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:var(--fs-200);
  line-height:var(--lh-body);color:var(--c-text);background:var(--c-surface);
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;}
img,svg,video{max-width:100%;display:block;height:auto;}

/* ============================================================
   Global Image Framework (shared, reusable across any component)
   Guarantees no uploaded image — any size, any aspect ratio —
   can ever stretch, overflow, or break layout.

   Usage:
   1. Base reset above already applies to every <img> site-wide.
   2. Wrap in `.image-container` (+ a ratio modifier) to fix the
      frame's shape regardless of the source photo's dimensions.
   3. Give the <img> itself `.img-cover` to fill that frame without
      distortion (crops to fit, always centered).
   4. Optionally add `.effect-ambient-zoom` to the <img> for a slow
      opt-in zoom — never applied by default, always respects
      prefers-reduced-motion via the global kill-switch below.
   ============================================================ */
.image-container{position:relative;width:100%;overflow:hidden;border-radius:var(--r-card);background:var(--c-surface-alt);}
.image-container--4x5{aspect-ratio:4/5;}
.image-container--16x9{aspect-ratio:16/9;}
.image-container--1x1{aspect-ratio:1/1;}
.image-container--4x3{aspect-ratio:4/3;}
.img-cover{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
@keyframes ambient-zoom{from{transform:scale(1);}to{transform:scale(1.08);}}
.effect-ambient-zoom{animation:ambient-zoom 14s ease-in-out infinite alternate;}
h1,h2,h3,h4{line-height:var(--lh-tight);margin:0 0 var(--sp-4);font-weight:700;}
h1,h2{letter-spacing:-.02em;}
h1{font-size:var(--fs-800);} h2{font-size:var(--fs-600);} h3{font-size:var(--fs-500);}
p{margin:0 0 var(--sp-4);max-width:68ch;}
a{color:var(--c-accent-strong);text-underline-offset:2px;} /* was var(--c-maroon) — uses semantic token directly */
a:hover{color:var(--c-accent);}                             /* was accent-strong; swapped so hover is the lighter tone */
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;cursor:pointer;}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--sp-6);}
@media (min-width:900px){.container{padding-inline:var(--sp-8);}}
.site-main{flex:1 0 auto;}
.section{padding-block:var(--sp-20);}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:var(--sp-2);top:-3rem;background:var(--c-surface-raised);color:var(--c-text);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);z-index:var(--z-menu);transition:top var(--dur-fast) var(--ease);}
.skip-link:focus{top:var(--sp-2);}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-sm);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);
  border:1px solid transparent;border-radius:var(--r-pill);font-weight:600;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);}
.btn-primary{background:var(--c-accent);color:var(--c-on-accent);}
.btn-primary:hover{background:var(--c-accent-strong);color:var(--c-on-accent);transform:translateY(-1px);box-shadow:0 12px 24px rgba(217,119,6,.35);} /* was rgba(255,153,51,.35) — glow tint follows new saffron */
.btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--c-border);}
.btn-ghost:hover{border-color:var(--c-ink);color:var(--c-ink-strong);}
/* Small — doc 04 §1.3 (named in spec, was missing from implementation) */
.btn-sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-100);}
/* Text — link-style, lowest emphasis; no border/fill, underline reveals on hover */
.btn-text{background:transparent;border-color:transparent;color:var(--c-accent-strong);padding:var(--sp-2) var(--sp-1);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease);}
.btn-text:hover{color:var(--c-accent);text-decoration-color:currentColor;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

/* ---------- Cards ---------- */
.card{background:var(--c-surface-raised);border-radius:var(--r-card);border:var(--card-border);box-shadow:var(--card-shadow);padding:var(--sp-6);transition:transform var(--dur-med) var(--ease),border-color var(--dur-fast) var(--ease);}
/* Flush-top image for cards — pulls .image-container out to the card's
   edges via negative margin (card padding is uniform, so this is the
   standard technique for an edge-to-edge image atop padded content).
   Reused by Programme, Feature, and Gallery card variants. */
.card__image{margin:calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-4);overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0;}
.card__image .image-container{border-radius:0;}
.card:hover{transform:translateY(-2px);border-color:var(--c-accent);}
.eyebrow{display:inline-block;font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.08em;color:var(--c-accent-strong);margin-bottom:var(--sp-2);font-weight:700;}

/* ---------- Section Header (shared) ---------- */
/* Componentizes the eyebrow -> h1/h2 -> intro paragraph pattern repeated across every page. */
.section-header{max-width:72ch;margin-bottom:var(--sp-8);}
.section-header--center{margin-inline:auto;text-align:center;}
.section-header p{color:var(--c-text-soft);}

/* ---------- Statistic Card (shared, light-surface) ---------- */
/* Standalone variant of .trust__item for use outside dark bands. */
.stat-card{background:var(--c-surface-raised);border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:var(--sp-6);text-align:center;}
.stat-card .num{font-size:var(--fs-600);font-weight:700;color:var(--c-accent);line-height:var(--lh-tight);}
.stat-card .lbl{font-size:var(--fs-100);color:var(--c-text-soft);margin-top:var(--sp-2);}
.stat-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-6);}

/* ---------- CTA Block (shared, in-page/light-surface) ---------- */
/* For CTAs that need emphasis without a full-width dark band. */
.cta-block{background:var(--c-surface-alt);border:1px solid var(--c-border);border-radius:var(--r-card);padding:var(--sp-12) var(--sp-8);text-align:center;max-width:72ch;margin-inline:auto;}
.cta-block h2,.cta-block h3{margin-bottom:var(--sp-3);}
.cta-block p{margin-inline:auto;}
.cta-block .btn{margin-top:var(--sp-4);}

/* ---------- Empty State (shared) ---------- */
.empty-state{text-align:center;padding:var(--sp-16) var(--sp-8);background:var(--c-surface-alt);border-radius:var(--r-card);}
.empty-state h2,.empty-state h3{margin-bottom:var(--sp-3);}
.empty-state p{margin-inline:auto;color:var(--c-text-soft);}

/* ---------- Alert (shared) ---------- */
/* Unified success/error/warning/info banner. Consumes doc 03 §7.1 semantic tokens. */
.alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-6);border-radius:var(--r-sm);border-left:4px solid var(--c-border);background:var(--c-surface-alt);color:var(--c-text);font-size:var(--fs-100);font-weight:600;}
.alert p,.alert div{margin:0;font-weight:400;}
.alert--success{border-left-color:var(--c-success);background:rgba(47,111,79,.07);}
.alert--error{border-left-color:var(--c-error);background:rgba(220,38,38,.05);color:var(--c-error);}
.alert--warning{border-left-color:var(--c-warning);background:rgba(245,158,11,.08);}
.alert--info{border-left-color:var(--c-text-soft);background:var(--c-surface-alt);}

/* ---------- Header ---------- */
/* Sticky always. Background is translucent+blurred at page top, switches to
   solid + shadow once scrolled (.is-scrolled, toggled by app.js) — the overlay
   nav's own background is untouched by this; only the header bar changes. */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border);transition:background var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease);}
.site-header.is-scrolled{background:var(--c-surface-raised);box-shadow:0 2px 14px rgba(31,41,55,.08);border-bottom-color:transparent;}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-6);min-height:var(--header-h);padding-block:var(--sp-2);}
.brand{font-family:var(--font-serif);font-weight:700;font-size:var(--fs-400);color:var(--c-ink);text-decoration:none;white-space:nowrap;}
.brand__logo{height:52px;width:auto;display:block;}
.brand small{display:block;font-size:var(--fs-100);font-weight:400;color:var(--c-text-soft);font-family:var(--font-sans);}
.header-ctas{display:flex;align-items:center;gap:var(--sp-2);}
/* Mobile-only: pin the Donate+hamburger cluster to the right edge.
   Tablet/desktop have their own scoped overrides further down. */
@media (max-width:767px){.header-ctas{margin-left:auto;}}
.menu-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border:1px solid var(--c-border);border-radius:var(--r-pill);background:transparent;color:var(--c-ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-100);}
.menu-toggle:hover{border-color:var(--c-ink);}
.menu-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;}
.menu-toggle__bars span{display:block;width:18px;height:2px;background:currentColor;}

/* ---------- Desktop/Tablet inline nav (>=768px) ---------- */
/* Mobile (<768px) keeps the full-screen overlay exclusively — this row is
   hidden and the hamburger is the only entry point below the breakpoint. */
.site-header__nav{display:none;}
@media (min-width:768px){
  .site-header__nav{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:nowrap;}
  .site-header__nav a{color:var(--c-text);font-weight:600;font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;padding:var(--sp-1) 0;position:relative;white-space:nowrap;}
  .site-header__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease);}
  .site-header__nav a:hover,.site-header__nav a:focus-visible{color:var(--c-accent-strong);}
  .site-header__nav a:hover::after,.site-header__nav a:focus-visible::after{transform:scaleX(1);}
  .menu-toggle{display:none;}
  .brand small{display:none;}
}
/* Tablet sub-range (768-1023px): a single row is too narrow for full brand +
   7 links + Donate. Wrap into two rows — brand/CTA on top, nav centered below
   with a hairline divider — rather than truncating or overflowing. Still zero
   overlay; the nav stays permanently visible, just on its own row. */
@media (min-width:768px) and (max-width:1023px){
  .site-header__inner{flex-wrap:wrap;row-gap:var(--sp-2);}
  .brand{order:1;}
  .header-ctas{order:2;margin-left:auto;}
  .site-header__nav{order:3;flex-basis:100%;justify-content:center;gap:var(--sp-4);padding-top:var(--sp-2);border-top:1px solid var(--c-border);}
}
@media (min-width:1024px){
  .site-header__inner{flex-wrap:nowrap;}
  .site-header__nav{margin-left:auto;}
}
@media (min-width:1200px){
  .site-header__nav{gap:var(--sp-6);}
  .brand small{display:block;}
}

/* ---------- Full-screen menu ---------- */
.site-menu{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;padding:var(--sp-6);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease),visibility var(--dur-med);}
.site-menu[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);}
.site-menu__top{display:flex;justify-content:flex-end;}
.site-menu__close{background:transparent;border:1px solid var(--c-border);color:var(--c-text);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-100);}
.site-menu__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);text-align:center;overflow-y:auto;padding-block:var(--sp-8);}
.site-menu__link{font-family:var(--font-serif);font-size:var(--fs-600);font-weight:700;color:var(--c-text);text-decoration:none;}
.site-menu__link:hover{color:var(--c-accent);}
.site-menu__foot{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);padding-block:var(--sp-4);}
.site-menu__wordmark{font-family:var(--font-serif);font-weight:700;font-size:clamp(2rem,8vw,3.6rem);line-height:1;text-align:center;color:var(--c-text);letter-spacing:-.02em;opacity:.5;}

/* ---------- Hero ---------- */
/* Sprint 06: unified hero system, two modes sharing one wrapper.
   .hero--media = full-bleed flat background photo with text overlaid on
   top (depth via scrim + text-shadow) -- used wherever the source photo is
   landscape/wide. .hero--split = two-column layout, image one side / text
   the other -- used wherever the source photo is a portrait crop (forcing
   those into a wide full-bleed band would crop out the subject). Both
   fill one full viewport below the header on load, so the complete hero
   message is visible before any scroll. */
.hero{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);min-height:calc(100svh - var(--header-h));display:grid;align-items:center;}

.hero--media{padding-block:0;}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;transform:scale(1.04);will-change:transform;transition:transform 8s ease;}
.hero__bg--placeholder{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,var(--c-surface-alt),var(--c-surface-alt) 14px,#E8E0D0 14px,#E8E0D0 28px);color:var(--c-text-soft);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.08em;}
/* Scrim darkest at the bottom third, where align-items:flex-end keeps the
   text -- paired with per-text-node text-shadow below so contrast holds
   regardless of the photo's local brightness at that point. */
/*.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(31,41,55,.05) 0%,rgba(31,41,55,.25) 55%,rgba(31,41,55,.62) 100%);} */
/*.hero--media .hero__stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);width:85%;max-width:1400px;margin-inline:auto;}*/
.hero--media .eyebrow{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);}
/*.hero--media .hero__heading,.hero--media .hero__sub,.hero--media .hero__quote{color:#fff;}*/
/*.hero--media .hero__heading{text-shadow:0 2px 10px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.6);}*/
/*.hero--media .hero__sub,.hero--media .hero__quote{text-shadow:0 1px 6px rgba(0,0,0,.5);}*/
.hero__overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(9,16,24,.22) 0%,rgba(9,16,24,.45) 55%,rgba(9,16,24,.72) 100%);}
.hero__vignette{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 25%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.42) 100%);}

.hero--split{display:flex;align-items:center;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));padding-block:var(--sp-12);}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center;width:85%;max-width:1400px;margin-inline:auto;}
.hero__grid .hero__media{aspect-ratio:4/5;max-height:65vh;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--card-shadow);}
.hero--split .hero__content{align-items:flex-start;text-align:left;}
.hero--split .hero__ctas{justify-content:flex-start;}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;}.hero__grid .hero__media{aspect-ratio:auto;width:100%;max-height:32vh;}.hero__grid .hero__media img{object-position:center 8%;}.hero--split .hero__content{align-items:center;text-align:center;}.hero--split .hero__ctas{justify-content:center;}}

.hero__heading{font-size:clamp(1.5rem,4vw,var(--fs-700));letter-spacing:-.01em;max-width:none;}
.hero__heading .accent{color:var(--c-accent-strong);}
.hero__media{position:relative;background:var(--c-surface-alt);overflow:hidden;}
.hero__media-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,var(--c-surface-alt),var(--c-surface-alt) 14px,#E8E0D0 14px,#E8E0D0 28px);color:var(--c-text-soft);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.08em;}

/* Reusable supporting-image grid — for sections that reference multiple
   real programmes/moments in prose (e.g. About's "Living Tradition of
   Service"). 4-up on desktop, 2-up on mobile. Images must be real and
   directly support the adjacent text, never decorative filler. */
.visual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-block:var(--sp-8);}
@media (max-width:768px){.visual-grid{grid-template-columns:repeat(2,1fr);}}
/*.hero__content{max-width:75ch;display:flex;flex-direction:column;align-items:center;}*/
.hero__sub{font-family:var(--font-serif);font-size:var(--fs-400);color:var(--c-accent-strong);font-style:italic;line-height:var(--lh-tight);margin-bottom:var(--sp-2);}
.hero__quote{font-family:var(--font-sans);font-size:var(--fs-200);color:var(--c-text-soft);font-style:normal;line-height:var(--lh-body);margin-bottom:var(--sp-2);}
.hero__ctas{display:flex;gap:var(--sp-4);margin-top:var(--sp-2);flex-wrap:wrap;justify-content:center;}

/* ---------- Trust band (80G) ---------- */
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-8);text-align:center;}
.trust__item .num{font-size:var(--fs-600);font-weight:700;color:var(--c-accent);}
.trust__item .lbl{font-size:var(--fs-100);color:var(--c-text-soft);margin-top:var(--sp-1);}
/* Sprint 03: tinted fill (not just an outline) reads as a more considered, premium badge */
/* Text stays the theme-invert's own light color (inherited) — kept off
   saffron-on-tint deliberately: that combination measured ~4:1 contrast,
   under WCAG AA for this text size. Saffron is used for the tint/border only. */
.trust__badge{display:inline-block;background:rgba(217,119,6,.12);border:1px solid rgba(217,119,6,.4);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-100);font-weight:700;letter-spacing:.06em;margin-bottom:var(--sp-6);}

/* ---------- Program cards ---------- */
/* Sprint 03: wider gap — the previous sp-6 read as slightly dense at 3 rows of 2 */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-8);}
@media (max-width:700px){.card-grid{grid-template-columns:1fr;}}
/* Sprint 06: pill background added — matches the approved Editorial
   Components tag treatment. One shared rule, so this upgrades every
   instance (Home, Activities, Campaigns, Events, Activity Detail) at once. */
.program__tag{display:inline-block;color:var(--c-accent-strong);background:rgba(217,119,6,.08);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:var(--sp-2);}
.card__impact{display:flex;gap:var(--sp-2);align-items:flex-start;margin:var(--sp-3) 0 var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--c-border);font-family:var(--font-serif);font-style:italic;font-size:var(--fs-100);color:var(--c-text-soft);line-height:var(--lh-body);}
.card__impact::before{content:"";flex-shrink:0;width:6px;height:6px;margin-top:.5em;border-radius:50%;background:var(--c-accent);}
/* Sprint 03: the "undecided donor" card is a distinct decision moment, not
   just another programme — a top accent bar marks it as its own category
   without adding new copy or iconography. */
/* Deep Saffron, not Sacred Saffron — the lighter accent measured 2.74:1 on
   Sand Beige, under the 3:1 WCAG minimum for non-text UI contrast. */
.card--highlight{position:relative;border-color:var(--c-accent-strong);}
.card--highlight::before{content:"";position:absolute;top:-1px;left:var(--sp-6);right:var(--sp-6);height:3px;background:var(--c-accent-strong);border-radius:0 0 var(--r-sm) var(--r-sm);}

/* ---------- Founder teaser ---------- */
.founder__grid{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-12);align-items:center;}
@media (max-width:700px){.founder__grid{grid-template-columns:1fr;}}
.founder__portrait{aspect-ratio:1;border:1px solid var(--c-border);border-radius:var(--r-card);box-shadow:var(--card-shadow);background:repeating-linear-gradient(135deg,var(--c-surface-alt),var(--c-surface-alt) 14px,#E8E0D0 14px,#E8E0D0 28px);display:flex;align-items:center;justify-content:center;color:var(--c-text-soft);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.08em;overflow:hidden;} /* stripe alt: was #efe3d2; shadow+overflow added Sprint 03 for real-photo framing */

/* ---------- CTA band ---------- */
/* Sprint 03: donation should feel like the story's natural conclusion — a
   touch more vertical air and a wider measure than the default cta-band
   used elsewhere gives the homepage's final CTA more ceremony. */
.cta-band__inner{text-align:center;max-width:64ch;margin-inline:auto;}
.cta-band__inner h2{margin-bottom:var(--sp-3);}

/* ---------- Footer ---------- */
.site-footer{flex-shrink:0;padding-block:var(--sp-16) var(--sp-8);margin-top:var(--sp-24);}
.site-footer a{color:var(--c-text);text-decoration:none;}
.site-footer a:hover{color:var(--c-accent);}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--sp-8);}
.footer__brand{font-family:var(--font-serif);font-size:var(--fs-500);}
.footer__col h4{font-size:var(--fs-200);text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-soft);}
.footer__col li{margin-bottom:var(--sp-2);}
.footer__legal{margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--c-border);font-size:var(--fs-100);color:var(--c-text-soft);text-align:center;}
.footer__logo{height:40px;width:auto;display:block;margin-bottom:var(--sp-4);}
/* Honesty-gated trust signals (doc 06 Priority 2) — renders only when admin has entered real data */
.footer__address{font-size:var(--fs-100);color:var(--c-text-soft);margin-top:var(--sp-3);max-width:32ch;}
.footer__social{display:flex;gap:var(--sp-4);margin-top:var(--sp-3);flex-wrap:wrap;}
.footer__social a{font-size:var(--fs-100);font-weight:600;}

/* ---------- Stub page ---------- */
.stub{padding-block:var(--sp-24);text-align:center;}
.stub .eyebrow{margin-bottom:var(--sp-4);}

/* ---------- Donation wizard ---------- */
.wizard{max-width:640px;margin-inline:auto;background:var(--c-surface-raised);border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:var(--sp-8);}

/* Progress indicator with connector lines */
.wizard__progress{display:flex;align-items:flex-start;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-6) 0 var(--sp-8);counter-reset:step;position:relative;}
.wizard__progress::before{content:"";position:absolute;top:16px;left:0;right:0;height:2px;background:var(--c-border);pointer-events:none;z-index:0;}
.wizard__progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-soft);text-align:center;counter-increment:step;position:relative;z-index:1;}

/* Step circles */
.wizard__progress li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--c-border);color:var(--c-text-soft);font-weight:700;font-size:var(--fs-200);background:var(--c-surface-raised);transition:all var(--dur-fast) var(--ease);}
.wizard__progress li:focus-within::before{box-shadow:0 0 0 3px var(--c-focus);}

/* Active step */
.wizard__progress li.is-active{color:var(--c-accent);font-weight:700;}
.wizard__progress li.is-active::before{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);box-shadow:0 4px 12px rgba(217,119,6,.25);width:48px;height:48px;font-size:var(--fs-300);}

/* Completed step */
.wizard__progress li.is-done{color:var(--c-text);}
.wizard__progress li.is-done::before{content:"\2713";background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);font-size:var(--fs-300);}

.wizard__step[hidden]{display:none;}
.wizard__step h3{margin-bottom:var(--sp-4);font-size:var(--fs-500);font-weight:700;color:var(--c-text);line-height:var(--lh-tight);}
.wizard__step h3:focus{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-sm);}

/* Amount chips */
.amount-chips{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-6) 0;}
.amount-chip{min-height:56px;min-width:104px;padding:var(--sp-3) var(--sp-6);border:2px solid var(--c-border);border-radius:var(--r-pill);background:transparent;color:var(--c-text);font-weight:700;font-size:var(--fs-300);cursor:pointer;transition:all var(--dur-fast) var(--ease);}
.amount-chip:hover{border-color:var(--c-accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(217,119,6,.15);}
.amount-chip:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;}
.amount-chip[aria-pressed="true"]{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent);box-shadow:0 8px 24px rgba(217,119,6,.35);transform:translateY(-2px);}

.field{margin:var(--sp-6) 0;}
.field label{display:block;font-size:var(--fs-100);font-weight:700;margin-bottom:var(--sp-3);color:var(--c-text);}
.field input{width:100%;min-height:44px;padding:var(--sp-3) var(--sp-4);border:2px solid var(--c-border);border-radius:var(--r-sm);font:inherit;background:var(--c-surface);color:var(--c-text);transition:border-color var(--dur-fast) var(--ease);}
.field input:hover{border-color:var(--c-text-soft);}
.field input:focus{border-color:var(--c-accent);outline:2px solid var(--c-focus);outline-offset:1px;}
.field textarea{width:100%;min-height:100px;padding:var(--sp-3) var(--sp-4);border:2px solid var(--c-border);border-radius:var(--r-sm);font:inherit;background:var(--c-surface);color:var(--c-text);resize:vertical;transition:border-color var(--dur-fast) var(--ease);}
.field textarea:hover{border-color:var(--c-text-soft);}
.field textarea:focus{border-color:var(--c-accent);outline:2px solid var(--c-focus);outline-offset:1px;}

/* Aligned to .alert--success (doc 03 §5: Forest Green is the success/verified color, saffron is reserved for CTAs) */
.form-success{background:rgba(47,111,79,.07);border-left:4px solid var(--c-success);padding:var(--sp-4) var(--sp-6);border-radius:var(--r-sm);margin-bottom:var(--sp-6);color:var(--c-text);}

.wizard__nav{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-8);}
.wizard__nav .btn{flex:1;}
@media (max-width:640px){.wizard__nav{flex-direction:column-reverse;}.wizard__nav .btn{width:100%;}}

.wizard__error{color:var(--c-error);font-size:var(--fs-100);margin-top:var(--sp-4);min-height:1.5em;font-weight:600;padding:var(--sp-2);background:rgba(220,38,38,.05);border-radius:var(--r-sm);}

/* Review step: better visual distinction */
.review{background:var(--c-surface-alt);border:1px solid var(--c-border);border-radius:var(--r-card);padding:var(--sp-6);margin:var(--sp-6) 0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4) var(--sp-6);}
.review dt{font-weight:700;color:var(--c-text);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.04em;}
.review dd{margin:0;font-size:var(--fs-300);color:var(--c-text);font-weight:600;}

.demo-badge{display:inline-block;background:var(--c-accent-strong);color:#fff;font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);margin-bottom:var(--sp-4);}

/* ---------- Events ---------- */
.event-date{display:inline-block;font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--c-accent-strong);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-3);}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-6);}
/* Gallery Card, per approved Editorial Components spec: 4:5 portrait
   image, category + caption visible on the card (previously only shown
   inside the lightbox on click), hover = lift + subtle image zoom. */
.gallery-tile{padding:0;border:1px solid var(--c-border);border-radius:var(--r-card);overflow:hidden;background:var(--c-surface-raised);box-shadow:var(--card-shadow);cursor:pointer;display:flex;flex-direction:column;text-align:left;transition:transform var(--dur-med) var(--ease),border-color var(--dur-fast) var(--ease);}
.gallery-tile:hover{transform:translateY(-2px);border-color:var(--c-accent);}
.gallery-tile__media{aspect-ratio:4/5;overflow:hidden;background:var(--c-surface-alt);}
.gallery-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-med) var(--ease);}
.gallery-tile:hover img{transform:scale(1.03);}
.gallery-tile__body{padding:var(--sp-4);}
.gallery-tile__ph{aspect-ratio:4/5;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);text-align:center;padding:var(--sp-4);background:repeating-linear-gradient(135deg,var(--c-surface-alt),var(--c-surface-alt) 14px,#E8E0D0 14px,#E8E0D0 28px);} /* stripe alt: was #efe3d2 */
.gallery-tile__cat{font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--c-accent-strong);display:block;margin-bottom:var(--sp-1);}
.gallery-tile__cap{font-size:var(--fs-200);color:var(--c-text);font-weight:600;}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-6);}
.lightbox[hidden]{display:none;}
.lightbox__close{position:absolute;top:var(--sp-6);right:var(--sp-6);background:transparent;border:1px solid var(--c-border);color:var(--c-text);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-100);}
.lightbox__figure{margin:0;max-width:900px;width:100%;text-align:center;}
.lightbox__media{aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:repeating-linear-gradient(135deg,#253040,#253040 16px,#2D3A4C 16px,#2D3A4C 32px);display:flex;align-items:center;justify-content:center;color:var(--c-text-soft);} /* was warm #2E2018/#3A2A1F — updated to charcoal-derived dark */
.lightbox__media img{width:100%;height:100%;object-fit:contain;}
.lightbox__caption{margin-top:var(--sp-4);color:var(--c-text-soft);}

/* ---------- Responsive ---------- */
/* Single-line nowrap heading only holds up at tablet+ width; at phone
   widths this specific heading (52 chars) would shrink past readable size
   or overflow if forced onto one line, so it wraps normally here instead. */
@media (max-width:600px){.hero__heading{font-size:clamp(1.5rem,7vw,var(--fs-700));}}
@media (max-width:900px){.hero__stack{width:92%;}}
@media (max-width:560px){.wizard{padding:var(--sp-6);}.wizard__progress li{font-size:0;}.wizard__progress li::before{font-size:var(--fs-200);}.wizard__nav{flex-direction:column-reverse;}.wizard__nav .btn{width:100%;justify-content:center;}}
@media (max-width:640px){
  .brand small{display:none;}.brand{font-size:var(--fs-300);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .header-ctas .btn{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-100);}
  .menu-toggle{width:44px;height:44px;padding:0;justify-content:center;}
  .menu-toggle__label{display:none;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .site-menu__link{font-size:var(--fs-500);}
  .cta-block{padding:var(--sp-8) var(--sp-6);}
  .empty-state{padding:var(--sp-12) var(--sp-4);}
}
@media (max-width:480px){
  .footer__grid{grid-template-columns:1fr;text-align:center;}
  .footer__social{justify-content:center;}
  .footer__logo{margin-inline:auto;}
}