/* ============================================================
   WAYNE FOUNDATION — SHARED DESIGN TOKENS & COMPONENTS
   Source of truth: WN - BRAND - Wayne-Foundation-Design-System - 2026-07
   (v1.0 — LOCKED, July 7, 2026). Reconciled against the locked system per
   WN - BUILD - Claude-Code-Final-Handoff-Fable5 - 2026-07 §4.
   Non-negotiables: zero border-radius (sole exception: .wordmark .mark,
   per the Design System's own Wordmark spec), no drop shadows,
   no gradients except the gold hairline, no full-bleed images on dark pages.
   ============================================================ */
:root{
  /* dark palette */
  --bg-deep: #0D0B09;
  --bg-surface: #141210;
  --bg-raised: #1C1916;
  --gold-bright: #E2C99A;
  --gold-base: #C8A97A;
  --gold-dim: #9A7A50;
  --text-primary: #F0EBE0;
  --text-secondary: #B8AF9F;
  --text-muted: #7A7065;
  --green-base: #2E7D52;   /* VerifyDot / verified status only */
  --amber-base: #8A6428;   /* pending / in-progress status only */

  /* parchment palette — locked 2026-07-07 */
  --parchment-bg: #F0EDE4;
  --parchment-alt: #E9E4D6;
  --parchment-ink: #1C1916;
  --parchment-line: rgba(28,25,22,0.14);

  /* hairlines */
  --border-gold: rgba(200,169,122,0.22);
  --border-faint: rgba(240,235,224,0.08);
  --gold-hairline: rgba(154,122,80,0.35); /* gold-dim at low opacity — ProgramGrid separators */

  /* width tokens */
  --width-narrow: 720px;
  --width-prose: 820px;
  --width-grid: 1180px;
  --width-nav: 1280px;

  /* spacing tokens */
  --space-4: 16px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;   /* standard section vertical padding */
  --space-30: 120px;  /* hero sections only */

  /* type-scale tokens */
  --text-xs: 11px;
  --text-base: 15px;
  --text-2xl: 36px;
  --text-4xl: 64px;
  --text-5xl: 88px;   /* large numerals — TargetBlock */

  /* motion */
  --ease-institution: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: var(--ease-institution);

  /* fonts — six fonts, one job each */
  --font-impact: 'Barlow Condensed', sans-serif;  /* The Declaration Font — hero impact statements only */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-ui: 'Outfit', sans-serif;
  --font-bn-display: 'Tiro Bangla', serif;
  --font-bn-body: 'Hind Siliguri', sans-serif;

  /* v1.1 readability: light 300 blooms/thins on dark backgrounds —
     body weight is 400 on the dark register, 300 stays on parchment */
  --w-body: 400;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--width-grid); margin:0 auto; padding:0 var(--space-12); }

/* ---------- bilingual toggle ---------- */
.i18n-bn{ display:none; }
body.lang-bn .i18n-en{ display:none; }
body.lang-bn .i18n-bn{ display:inline; }
body.lang-bn .bn-display{ font-family:var(--font-bn-display); }
body.lang-bn .bn-body{ font-family:var(--font-bn-body); }

/* ---------- shared component: eyebrow ---------- */
.eyebrow{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:var(--text-xs);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-base);
  display:block;
}

/* ---------- shared component: gold rule divider ---------- */
/* Fades transparent -> gold-dim -> transparent. The only decorative element
   permitted on dark pages. Appears below an Eyebrow, above a heading. */
.gold-rule{
  width:64px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  border:none;
  margin:18px auto 26px;
  opacity:0.9;
}
.gold-rule.left{ margin:18px 0 26px; }

/* ---------- shared component: nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(13,11,9,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-faint);
}
.site-nav .nav-container{
  max-width:var(--width-nav);
  margin:0 auto;
  padding:0 var(--space-12);
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
/* Wayne Foundation mark (v1.1) — designer-delivered W-mark SVG paired with
   the Playfair wordmark text. The placeholder gold circle is retired, which
   also removes its border-radius exception. */
.wordmark{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.04em;
  color:var(--text-primary);
}
.wordmark .wf-mark{
  height:20px; width:auto; display:block;
  flex-shrink:0;
}
.nav-links{
  display:flex; gap:30px;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.03em;
  color:var(--text-secondary);
}
.nav-links a{ position:relative; padding:4px 0; transition:color 180ms var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--gold-bright); }
.nav-links a.current{ color:var(--gold-bright); }
.nav-right{ display:flex; align-items:center; gap:22px; }
/* Language toggle — square corners only (zero border-radius, non-negotiable).
   Two adjacent square buttons with a hairline divider. */
.lang-toggle{
  display:flex;
  border:1px solid var(--border-gold);
  background:transparent;
}
.lang-toggle button{
  font-family:var(--font-ui);
  font-size:var(--text-xs); font-weight:600; letter-spacing:0.1em;
  padding:6px 12px;
  background:none; border:none;
  color:var(--text-muted);
  cursor:pointer;
  transition:color 180ms var(--ease), background 180ms var(--ease);
}
.lang-toggle button + button{ border-left:1px solid var(--border-gold); }
.lang-toggle button.active{ background:var(--gold-base); color:var(--bg-deep); }
.nav-toggle-btn{ display:none; background:none; border:none; color:var(--text-primary); font-size:22px; cursor:pointer; }

@media(max-width:860px){
  .site-nav .nav-container{ padding:0 24px; }
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:16px;
    position:absolute; top:60px; left:0; right:0;
    background:rgba(13,11,9,0.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-faint);
    padding:20px 24px 26px;
  }
  .parchment .nav-links.open{
    background:rgba(240,237,228,0.97);
    border-bottom:1px solid var(--parchment-line);
  }
  .nav-toggle-btn{ display:block; }
}

/* ---------- hero ---------- */
/* Flat bg-deep only: no gradients except the gold hairline, no full-bleed
   images on dark pages (Design System non-negotiables). Text-only hero. */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  position:relative;
  padding:calc(60px + var(--space-30)) var(--space-12) var(--space-30);
  background:var(--bg-deep);
}
.hero-inner{ max-width:var(--width-prose); position:relative; z-index:1; }
.hero .eyebrow{ text-align:center; }
h1.hero-headline{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(36px, 5.2vw, var(--text-4xl));
  line-height:1.08;
  color:var(--text-primary);
  letter-spacing:-0.01em;
}
.hero-lede{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.45;
  color:var(--text-primary);
  max-width:640px;
  margin:26px auto 0;
}
body.lang-bn .hero-lede.bn-display{ font-family:var(--font-bn-display); font-weight:400; }
.hero-status{
  font-family:var(--font-body);
  font-weight:var(--w-body);
  font-size:16px;
  line-height:1.7;
  color:var(--text-secondary);
  max-width:560px;
  margin:26px auto 0;
}
body.lang-bn .hero-status{ font-family:var(--font-bn-body); }
.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  width:1px; height:44px;
  background:linear-gradient(var(--gold-dim), transparent);
  opacity:0.6;
}

/* ---------- section shared ---------- */
/* --space-24 (96px) is standard section padding; --space-30 (120px) is hero-only. */
section{ padding:var(--space-24) 0; position:relative; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.section-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px, 3vw, var(--text-2xl));
  color:var(--text-primary);
  line-height:1.25;
}
body.lang-bn .section-head h2.bn-display{ font-family:var(--font-bn-display); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- mandate ---------- */
.mandate{ background:var(--bg-surface); }
.mandate .container{ max-width:760px; text-align:center; }
.mandate p{
  font-size:19px;
  font-weight:var(--w-body);
  line-height:1.85;
  color:var(--text-secondary);
}
body.lang-bn .mandate p.bn-body{ font-family:var(--font-bn-body); font-size:19px; }

/* ---------- declaration moment ---------- */
/* The Declaration Font — Barlow Condensed ExtraBold 800, ALL CAPS,
   key word in gold-bright. Hero impact statements only. */
.declaration-block{ background:var(--bg-deep); text-align:center; }
.declaration{
  font-family:var(--font-impact);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(40px, 7.5vw, 92px);
  line-height:1.04;
  letter-spacing:0.01em;
  color:var(--text-primary);
  max-width:920px;
  margin:0 auto;
}
.declaration .key{ color:var(--gold-bright); }
body.lang-bn .declaration.bn-display{ font-family:var(--font-bn-display); font-weight:700; font-size:clamp(32px, 6vw, 72px); line-height:1.2; }
.declaration-ref{
  margin-top:26px;
  font-family:var(--font-ui);
  font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------- programs ---------- */
.programs{ background:var(--bg-surface); }
/* Gold 1px hairline separators — ProgramCard/Grid spec */
.program-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--gold-hairline);
  border:1px solid var(--gold-hairline);
}
.program-card{
  background:var(--bg-raised);
  padding:48px 36px;
  display:flex; flex-direction:column; gap:16px;
}
.program-card .eyebrow{ letter-spacing:0.18em; font-size:10px; }
.program-card h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--text-primary);
  line-height:1.3;
}
body.lang-bn .program-card h3.bn-display{ font-family:var(--font-bn-display); font-size:19px; }
.program-card p{
  font-size:16px;
  font-weight:var(--w-body);
  color:var(--text-secondary);
  line-height:1.7;
}
body.lang-bn .program-card p.bn-body{ font-family:var(--font-bn-body); }
@media(max-width:860px){ .program-grid{ grid-template-columns:1fr; } }

/* ---------- proof strip ---------- */
.proof-strip{
  background:var(--bg-deep);
  border-top:1px solid var(--border-faint);
  border-bottom:1px solid var(--border-faint);
}
.proof-strip .section-head h2{ font-style:italic; }
.proof-markers{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
  max-width:900px;
  margin:0 auto;
}
/* ProofCallout — left-bordered quote card, never centered (Design System §06) */
.proof-callout{
  padding:24px 0 24px 26px;
  border-left:2px solid var(--gold-base);
  text-align:left;
}
.proof-callout .marker-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
/* VerifyDot — RESERVED. 6px green dot, used only beside claims that link to a
   real, live, published source. No such public record is live yet, so it is
   defined but not activated anywhere. Wire it live once the ledger link is real. */
.verify-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green-base);
  flex-shrink:0;
  display:none; /* activate per real, linked claim only */
}
.proof-callout .marker-label{
  font-family:var(--font-ui);
  font-size:12px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-bright);
}
.proof-callout .marker-status{
  font-size:15px; font-weight:var(--w-body); color:var(--text-secondary); line-height:1.6;
}
body.lang-bn .proof-callout .marker-status.bn-body{ font-family:var(--font-bn-body); }
.proof-footnote{
  text-align:center; margin-top:44px;
  font-size:13px; color:var(--text-muted); font-weight:var(--w-body);
}
body.lang-bn .proof-footnote.bn-body{ font-family:var(--font-bn-body); }
.proof-footnote a{
  color:var(--gold-base);
  border-bottom:1px solid var(--gold-dim);
  padding-bottom:2px;
  transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.proof-footnote a:hover, .proof-footnote a:focus-visible{ color:var(--gold-bright); border-color:var(--gold-bright); }
@media(max-width:860px){ .proof-markers{ grid-template-columns:1fr; } }

/* ---------- north bengal stake ---------- */
.stake{ background:var(--bg-surface); }
.stake .container{ max-width:var(--width-narrow); }
.stake .section-head{ text-align:left; margin:0 0 44px; }
.stake p{
  font-size:17px; font-weight:var(--w-body); line-height:1.9; color:var(--text-secondary);
}
body.lang-bn .stake p.bn-body{ font-family:var(--font-bn-body); font-size:18px; }

/* ---------- quiet invitation ---------- */
.invitation{
  background:var(--bg-deep);
  text-align:center;
}
.invitation p{
  font-size:17px; font-weight:var(--w-body); color:var(--text-secondary);
  max-width:560px; margin:0 auto 22px;
}
body.lang-bn .invitation p.bn-body{ font-family:var(--font-bn-body); font-size:18px; }
.invite-link{
  font-family:var(--font-ui);
  font-size:14px; font-weight:500; letter-spacing:0.04em;
  color:var(--gold-bright);
  border-bottom:1px solid var(--gold-dim);
  padding-bottom:3px;
  transition:border-color 180ms var(--ease), color 180ms var(--ease);
}
.invite-link:hover, .invite-link:focus-visible{ border-color:var(--gold-bright); color:var(--gold-bright); }

/* ---------- footer ---------- */
footer{
  background:var(--bg-deep);
  border-top:1px solid var(--border-gold);
  padding:72px 0 40px;
  text-align:center;
}
.footer-arabic{
  font-family:var(--font-display);
  font-size:22px; color:var(--gold-bright); line-height:1.8; margin-bottom:8px;
}
.footer-translation{
  font-size:13px; font-style:italic; color:var(--text-muted); font-weight:var(--w-body);
  margin-bottom:30px;
}
.footer-tagline{
  font-family:var(--font-ui);
  font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold-base); margin-bottom:34px;
}
.footer-status{
  font-size:13px; font-weight:var(--w-body); color:var(--text-muted);
  max-width:480px; margin:0 auto 28px; line-height:1.7;
}
body.lang-bn .footer-status.bn-body{ font-family:var(--font-bn-body); }
.footer-links{
  display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
  font-family:var(--font-ui); font-size:12px; color:var(--text-secondary);
  margin-bottom:28px;
}
.footer-links a{ transition:color 180ms var(--ease); }
.footer-links a:hover, .footer-links a:focus-visible{ color:var(--gold-bright); }
.footer-contact{ font-size:12px; color:var(--text-muted); margin-bottom:22px; }
.footer-copyright{ font-size:11px; color:var(--text-muted); opacity:0.6; }

:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

/* ============================================================
   INTERIOR PAGES — The Institution, Our Work, Accountability, Involvement
   ============================================================ */

/* ---------- parchment register (Institution + Accountability; one card on Involvement) ---------- */
.parchment{
  background:var(--parchment-bg);
  color:var(--parchment-ink);
  --w-body: 300;
}
/* Eyebrow on parchment: muted ink, not gold (Design System §06) */
.parchment .eyebrow{ color:rgba(28,25,22,0.5); }
/* Ink text applies to page content only — the footer stays dark-register on
   every page, so its own text colors must win there. Scoping to <main> keeps
   this rule (class+element specificity) from overriding .footer-* colors. */
.parchment main h1, .parchment main h2, .parchment main h3{ color:var(--parchment-ink); }
.parchment main p{ color:rgba(28,25,22,0.72); }
.parchment .section-head h2{ color:var(--parchment-ink); }
.parchment .gold-rule{ opacity:1; }
.parchment .site-nav{
  background:rgba(240,237,228,0.82);
  border-bottom:1px solid var(--parchment-line);
}
.parchment .nav-links{ color:rgba(28,25,22,0.6); }
.parchment .nav-links a.current, .parchment .nav-links a:hover, .parchment .nav-links a:focus-visible{ color:var(--gold-dim); }
.parchment .wordmark{ color:var(--parchment-ink); }
.parchment .lang-toggle{ border-color:rgba(28,25,22,0.2); }
.parchment .lang-toggle button{ color:rgba(28,25,22,0.45); }
.parchment .lang-toggle button + button{ border-left-color:rgba(28,25,22,0.2); }
.parchment .lang-toggle button.active{ background:var(--gold-dim); color:var(--parchment-bg); }
.parchment .nav-toggle-btn{ color:var(--parchment-ink); }
.parchment .scroll-cue{ background:linear-gradient(var(--gold-dim), transparent); }

/* interior page hero — shorter than the Home full-viewport hero */
.page-hero{
  min-height:56vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(60px + var(--space-30)) var(--space-12) var(--space-30);
  position:relative;
}
.page-hero.dark-hero{ background:var(--bg-deep); }
.page-hero .hero-inner{ max-width:760px; }
.page-hero h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(30px, 4.4vw, 48px); line-height:1.14;
}
body.lang-bn .page-hero h1.bn-display{ font-family:var(--font-bn-display); }
.page-hero .lede{
  font-size:16px; font-weight:var(--w-body); line-height:1.8;
  color:var(--text-secondary); max-width:560px; margin:22px auto 0;
}
.parchment .page-hero .lede{ color:rgba(28,25,22,0.68); }
body.lang-bn .page-hero .lede.bn-body{ font-family:var(--font-bn-body); }

/* generic prose block, reused across interior pages */
.prose{ max-width:var(--width-narrow); margin:0 auto; }
.prose p{
  font-size:17px; font-weight:var(--w-body); line-height:1.85;
  color:var(--text-secondary); margin-bottom:20px;
}
.parchment .prose p{ color:rgba(28,25,22,0.72); }
body.lang-bn .prose p.bn-body{ font-family:var(--font-bn-body); font-size:17px; }
.prose p:last-child{ margin-bottom:0; }

/* content-block section wrapper, alternates surface tone */
.block{ padding:var(--space-24) 0; }
.block.alt{ background:var(--bg-surface); }
.parchment .block.alt{ background:var(--parchment-alt); }
.block .section-head{ text-align:left; margin:0 0 44px; max-width:var(--width-narrow); }

/* ---------- governance cards (Institution — parchment only) ---------- */
/* Top border in parchment-line; ALL CAPS muted-ink Outfit role kicker;
   name in Playfair; description in Source Sans (Design System §06 GovCard). */
.gov-card{
  border-top:1px solid var(--parchment-line);
  padding:30px 0 38px;
}
.gov-card .role{
  display:block;
  font-family:var(--font-ui);
  font-weight:600;
  font-size:var(--text-xs);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(28,25,22,0.5);
  margin-bottom:10px;
}
.gov-card h3{
  font-family:var(--font-display); font-weight:700; font-size:22px;
  margin-bottom:12px; color:var(--parchment-ink);
}
body.lang-bn .gov-card h3.bn-display{ font-family:var(--font-bn-display); }
.gov-card p{ font-size:var(--text-base); font-weight:var(--w-body); line-height:1.75; color:rgba(28,25,22,0.68); }
body.lang-bn .gov-card p.bn-body{ font-family:var(--font-bn-body); }

/* ---------- principle cards (Institution) ---------- */
.principle-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:rgba(28,25,22,0.1); border:1px solid rgba(28,25,22,0.1);
}
.principle-card{
  background:var(--parchment-bg);
  padding:44px 24px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* Ghost numeral — very faded gold, behind each principle card (01–04) */
.principle-card .ghost{
  position:absolute; top:-14px; right:6px;
  font-family:var(--font-display); font-weight:900;
  font-size:104px; line-height:1;
  color:var(--gold-dim); opacity:0.13;
  pointer-events:none; user-select:none;
}
.principle-card .term{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:20px; color:var(--gold-dim); margin-bottom:6px;
  position:relative;
}
.principle-card .gloss{
  font-family:var(--font-ui); font-size:var(--text-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(28,25,22,0.45); margin-bottom:14px; display:block;
  position:relative;
}
.principle-card p{ font-size:14px; font-weight:var(--w-body); line-height:1.7; color:rgba(28,25,22,0.68); position:relative; }
body.lang-bn .principle-card p.bn-body{ font-family:var(--font-bn-body); }
@media(max-width:860px){ .principle-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .principle-grid{ grid-template-columns:1fr; } }

/* ---------- legal / provisional notice block ---------- */
.notice-box{
  border:1px dashed var(--border-gold);
  padding:26px 28px;
  font-size:14px; font-weight:var(--w-body); line-height:1.75;
  color:var(--text-secondary);
  max-width:var(--width-narrow);
}
.parchment .notice-box{ border-color:rgba(28,25,22,0.22); color:rgba(28,25,22,0.68); }
body.lang-bn .notice-box.bn-body{ font-family:var(--font-bn-body); }

/* ---------- year one target block (Our Work) ---------- */
.target-block{
  border:1px solid var(--border-gold);
  padding:52px 44px;
  max-width:var(--width-prose);
  margin:0 auto;
}
/* Large numeral anchored to --text-5xl (88px) at desktop */
.target-figure{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(44px, 7vw, var(--text-5xl)); color:var(--gold-bright);
  text-align:center; line-height:1.1;
}
.target-period{
  text-align:center; font-family:var(--font-ui); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-top:12px;
}
body.lang-bn .target-period.bn-body{ font-family:var(--font-bn-body); letter-spacing:0.04em; }
.target-breakdown{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--border-faint);
}
.target-breakdown .item{ text-align:center; }
.target-breakdown .item .label{
  font-family:var(--font-ui); font-size:var(--text-xs); letter-spacing:0.06em;
  text-transform:uppercase; color:var(--gold-base); margin-bottom:8px; display:block;
}
body.lang-bn .target-breakdown .item .label.bn-body{ font-family:var(--font-bn-body); letter-spacing:0.02em; }
.target-breakdown .item p{ font-size:13px; color:var(--text-muted); font-weight:var(--w-body); }
body.lang-bn .target-breakdown .item p.bn-body{ font-family:var(--font-bn-body); }
@media(max-width:760px){ .target-breakdown{ grid-template-columns:1fr; } }
.target-verify-link{
  display:block; text-align:center; margin-top:32px;
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  color:var(--gold-bright); border-bottom:1px solid var(--gold-dim);
  padding-bottom:2px; width:fit-content; margin-left:auto; margin-right:auto;
  transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.target-verify-link:hover, .target-verify-link:focus-visible{ border-color:var(--gold-bright); }

/* ---------- pathway rows (Theory of Change, Our Work) ---------- */
.pathway{
  display:grid; grid-template-columns:72px 1fr; gap:28px;
  padding:32px 0; border-bottom:1px solid var(--border-faint);
}
.pathway:last-child{ border-bottom:none; }
/* Zero-padded sequence numerals — 01, 02, 03 (PathwayRow spec) */
.pathway .num{
  font-family:var(--font-display); font-weight:900; font-size:34px;
  color:var(--gold-dim);
}
.pathway h3{
  font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:8px;
}
body.lang-bn .pathway h3.bn-display{ font-family:var(--font-bn-display); }
.pathway p{ font-size:16px; font-weight:var(--w-body); line-height:1.75; color:var(--text-secondary); }
body.lang-bn .pathway p.bn-body{ font-family:var(--font-bn-body); }

/* ---------- status rows (Accountability — parchment only) ---------- */
/* Label in Source Sans (parchment ink); status in Outfit ALL CAPS, color-coded:
   green = verified/established, amber = pending/in-progress, gold = active. */
.status-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; padding:22px 0; border-bottom:1px solid var(--parchment-line);
}
.status-row .item-label{
  font-family:var(--font-body); font-weight:600; font-size:16px;
  color:var(--parchment-ink);
}
.status-row .item-detail{
  display:block;
  font-family:var(--font-body); font-weight:var(--w-body); font-size:14px;
  color:rgba(28,25,22,0.6); margin-top:4px;
}
body.lang-bn .status-row .item-detail.bn-body{ font-family:var(--font-bn-body); }
.status-row .item-status{
  font-family:var(--font-ui); font-weight:600; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  text-align:right; flex-shrink:0;
}
body.lang-bn .status-row .item-status.bn-body{ font-family:var(--font-bn-body); letter-spacing:0.02em; }
.status-row .item-status.state-verified{ color:var(--green-base); }
.status-row .item-status.state-pending{ color:var(--amber-base); }
.status-row .item-status.state-active{ color:var(--gold-dim); }
@media(max-width:600px){
  .status-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .status-row .item-status{ text-align:left; }
}

/* ---------- involvement audience list ---------- */
.audience-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-faint); border:1px solid var(--border-faint); }
.audience-card{ background:var(--bg-raised); padding:36px 28px; }
.audience-card h3{ font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:10px; }
body.lang-bn .audience-card h3.bn-display{ font-family:var(--font-bn-display); }
.audience-card p{ font-size:15px; font-weight:var(--w-body); color:var(--text-secondary); line-height:1.7; }
body.lang-bn .audience-card p.bn-body{ font-family:var(--font-bn-body); }
@media(max-width:860px){ .audience-list{ grid-template-columns:1fr; } }

/* ---------- contact card — the one parchment card on a dark page (Involvement) ---------- */
.contact-card{
  background:var(--parchment-bg);
  color:var(--parchment-ink);
  max-width:520px; margin:0 auto;
  padding:56px 48px;
  text-align:center;
  border:1px solid rgba(28,25,22,0.1);
}
.contact-card .eyebrow{ color:rgba(28,25,22,0.5); }
.contact-card h2{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--parchment-ink); margin-bottom:16px; }
body.lang-bn .contact-card h2.bn-display{ font-family:var(--font-bn-display); }
.contact-card p{ font-size:var(--text-base); font-weight:var(--w-body); color:rgba(28,25,22,0.7); line-height:1.75; margin-bottom:24px; }
body.lang-bn .contact-card p.bn-body{ font-family:var(--font-bn-body); }
.contact-card a.contact-email{
  font-family:var(--font-ui); font-size:16px; font-weight:600;
  color:var(--gold-dim); border-bottom:1px solid var(--gold-dim); padding-bottom:3px;
  transition:color 180ms var(--ease);
}

@media(max-width:860px){
  .container{ padding:0 24px; }
  .target-block{ padding:36px 24px; }
  .pathway{ grid-template-columns:1fr; gap:8px; }
}

/* ============================================================
   v1.1 ADDITIONS — Contained Plates, brand mark, motion choreography
   Per Design System Amendment v1.1 (2026-07): images never bleed;
   every plate is hairline-framed and graded to brand; all motion is
   once-only, transform/opacity only, disabled under reduced motion.
   ============================================================ */

/* ---------- contained plate ---------- */
.plate{
  margin:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--gold-hairline);
  background:var(--bg-raised);
}
.plate img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(0.85) contrast(1.05);
  transform:scale(1.035);
  transition:transform 1100ms var(--ease);
}
/* plate settle — Tier 2: image eases to rest as its section reveals, once */
.in .plate img, .plate.in img{ transform:scale(1); }
/* in-plate vignette — sanctioned plate grading, not page ornament */
.plate::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 130% 105% at 50% 42%, transparent 60%, rgba(13,11,9,0.45) 100%);
}
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-21x9{ aspect-ratio:21/9; }
.ratio-3x2{ aspect-ratio:3/2; }
.ratio-4x3{ aspect-ratio:4/3; }

.hero-plate{ max-width:760px; margin:48px auto 0; }
.section-plate{ margin:0 auto 48px; }
.prose .section-plate{ margin-bottom:40px; }

/* program-card plate bleeds to the card's own edges, hairline below */
.program-card .plate{
  margin:-48px -36px 28px;
  border:0;
  border-bottom:1px solid var(--gold-hairline);
}

/* ---------- footer lockup ---------- */
.footer-logo{ width:84px; height:auto; margin:0 auto 30px; display:block; opacity:0.95; }

/* ---------- motion tier 1: staggered reveal cascade ---------- */
.reveal-stagger > *{
  opacity:0; transform:translateY(22px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:320ms; }
/* grid chrome (hairline gaps/borders) arrives with the cards, not before */
.program-grid.reveal-stagger, .audience-list.reveal-stagger, .principle-grid.reveal-stagger{
  background:transparent; border-color:transparent;
  transition:background 600ms var(--ease), border-color 600ms var(--ease);
}
.program-grid.reveal-stagger.in{ background:var(--gold-hairline); border-color:var(--gold-hairline); }
.audience-list.reveal-stagger.in{ background:var(--border-faint); border-color:var(--border-faint); }
.principle-grid.reveal-stagger.in{ background:rgba(28,25,22,0.1); border-color:rgba(28,25,22,0.1); }

/* ---------- motion tier 2: declaration mask reveal ---------- */
/* Driven by the parent .reveal's .in state: a fully-clipped element has zero
   visible area, so it can never satisfy an IntersectionObserver threshold itself. */
.reveal-mask{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 900ms var(--ease) 150ms;
}
.reveal-mask.in, .in .reveal-mask{ clip-path:inset(-5% 0 -8% 0); }

/* ---------- motion tier 2: nav frost deepens on scroll ---------- */
.site-nav.scrolled{ background:rgba(13,11,9,0.88); }
.parchment .site-nav.scrolled{ background:rgba(240,237,228,0.94); }

@media (prefers-reduced-motion: reduce){
  .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
  .plate img{ transform:none !important; transition:none; }
  .reveal-mask{ clip-path:none; transition:none; }
}