/* =============================================================
   LADY CLEMENTINA I TOTTENHAM'S BEQUEST — styles.css
   Charity no. 220026 · Burton, Christchurch · tottenhambequest.org
   Variant: Warm Community · Terracotta & Cream
   ============================================================= */

:root{
  --ink:#2C1F18;
  --soft:#F8F0E4;
  --accent:#B5563B;
  --accent-2:#7C3520;
  --charcoal:#241813;
  --grey:#6B5A50;
  --hairline:#E6D9C8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important}
}
body{
  margin:0;
  color:var(--ink);
  background:var(--soft);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:768px){body{font-size:18px}}

img{max-width:100%;display:block;height:auto}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,details:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;
}

/* Typography utility classes */
.font-display{font-family:'EB Garamond',Georgia,serif;font-weight:500;line-height:1.1}
.font-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:0.02em}

h1,h2,h3,h4,h5{font-family:'EB Garamond',Georgia,serif;font-weight:500;line-height:1.1;color:var(--ink);margin:0 0 0.5em}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem)}
p{margin:0 0 1em}

/* Skip link */
.skip-link{
  position:absolute;top:-100px;left:8px;background:var(--ink);color:var(--soft);
  padding:10px 14px;border-radius:4px;z-index:9999;font-family:'IBM Plex Mono',monospace;font-size:13px;
}
.skip-link:focus{top:8px;color:var(--soft)}

/* Eyebrow label */
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:0.16em;font-size:11px;color:var(--accent);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;
}
@media (min-width:768px){.eyebrow{font-size:12px}}
.eyebrow::before{
  content:"";display:inline-block;width:28px;height:1px;background:var(--accent);
}
.eyebrow.eyebrow--light{color:var(--soft)}
.eyebrow.eyebrow--light::before{background:var(--soft)}

/* Site header */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(248,240,228,0.92);
  backdrop-filter:saturate(160%) blur(10px);
  transition:box-shadow .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  border-bottom-color:var(--hairline);
  box-shadow:0 8px 24px -16px rgba(44,31,24,.25);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1240px;margin:0 auto;padding:0 20px}
@media (min-width:1024px){.site-header .bar{height:76px;padding:0 28px}}
.site-header .brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.site-header .brand img{height:42px;width:42px}
.site-header .brand .lockup{display:none}
@media (min-width:540px){
  .site-header .brand .lockup{display:block;font-family:'EB Garamond',serif;font-weight:500;line-height:1.05;font-size:15px;max-width:260px}
  .site-header .brand .lockup small{display:block;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:9px;letter-spacing:0.18em;color:var(--grey);margin-top:2px}
}

.nav-primary{display:none}
@media (min-width:1024px){
  .nav-primary{display:flex;gap:26px;align-items:center}
  .nav-primary a{color:var(--ink);font-size:14.5px;position:relative;padding:6px 0}
  .nav-primary a[aria-current="page"]::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
  }
  .nav-primary a:hover{color:var(--accent-2)}
}
.nav-more{position:relative}
.nav-more > button{background:none;border:0;color:var(--ink);font-size:14.5px;cursor:pointer;font-family:inherit;padding:6px 0}
.nav-more-panel{
  position:absolute;top:100%;right:0;min-width:220px;background:var(--soft);
  border:1px solid var(--hairline);box-shadow:0 14px 32px -18px rgba(44,31,24,.35);
  padding:10px;display:none;border-radius:6px;margin-top:4px;
}
.nav-more.open .nav-more-panel{display:block}
.nav-more-panel a{display:block;padding:8px 10px;color:var(--ink);font-size:14px;border-radius:4px}
.nav-more-panel a:hover{background:var(--hairline);color:var(--accent-2)}

.cta-pill{
  background:var(--accent);color:var(--soft);padding:10px 20px;border-radius:999px;
  font-size:14px;font-weight:500;letter-spacing:0.01em;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--accent);transition:background .2s ease,transform .2s ease;
}
.cta-pill:hover{background:var(--accent-2);color:var(--soft);transform:translateY(-1px)}
.cta-outline{
  background:transparent;color:var(--ink);padding:10px 20px;border-radius:999px;
  font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--ink);transition:all .2s ease;
}
.cta-outline:hover{background:var(--ink);color:var(--soft)}
.cta-outline--light{color:var(--soft);border-color:var(--soft)}
.cta-outline--light:hover{background:var(--soft);color:var(--ink)}

/* Mobile menu */
.hamburger{display:inline-flex;background:none;border:1px solid var(--hairline);border-radius:999px;padding:10px 12px;font-size:18px;color:var(--ink);cursor:pointer;align-items:center;gap:8px}
@media (min-width:1024px){.hamburger{display:none}}
.mobile-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);
  background:var(--soft);transform:translateX(102%);transition:transform .35s ease;
  z-index:200;padding:24px 22px;display:flex;flex-direction:column;gap:18px;
  border-left:1px solid var(--hairline);
}
.mobile-panel.open{transform:translateX(0)}
.mobile-backdrop{position:fixed;inset:0;background:rgba(36,24,19,0.55);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s;z-index:150}
.mobile-backdrop.open{opacity:1;visibility:visible}
.mobile-panel .close-btn{align-self:flex-end;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer}
.mobile-panel nav a{display:block;padding:10px 0;color:var(--ink);font-size:17px;border-bottom:1px solid var(--hairline);font-family:'EB Garamond',serif}

/* Hero */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;color:var(--soft);
  background:#1a110c;overflow:hidden;
}
.hero--inner{min-height:62vh}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(36,24,19,.18) 0%,rgba(36,24,19,.12) 40%,rgba(36,24,19,.62) 80%,rgba(36,24,19,.82) 100%);z-index:1}
.hero .container{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 22px 92px;width:100%}
.hero h1{color:var(--soft);max-width:18ch;font-size:clamp(2.4rem,5.2vw,4.4rem);text-wrap:balance}
.hero p.standfirst{color:rgba(248,240,228,0.88);max-width:46ch;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.6;margin-top:10px}
.hero .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:0.22em;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.82}
.scroll-cue i{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Floating glass cards over hero */
.glass-card{
  background:rgba(248,240,228,0.72);backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(230,217,200,0.6);
  border-radius:14px;padding:22px 24px;box-shadow:0 16px 40px -22px rgba(36,24,19,0.5);
  color:var(--ink);
}
.hero-floats{
  position:relative;z-index:3;max-width:1200px;margin:-72px auto 0;padding:0 22px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;
}
.hero-floats .glass-card .num{font-family:'EB Garamond',serif;font-size:38px;line-height:1;color:var(--accent);margin-bottom:6px;display:block}
.hero-floats .glass-card .lbl{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:10.5px;letter-spacing:0.16em;color:var(--grey)}

/* Container & sections */
.container{max-width:1200px;margin:0 auto;padding:0 22px}
section.block{padding:64px 0}
@media (min-width:768px){section.block{padding:80px 0}}

/* Stats strip */
.stats-strip{background:var(--soft);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.stats-strip .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:36px 0}
@media (min-width:768px){.stats-strip .grid{grid-template-columns:repeat(4,1fr);padding:48px 0}}
.stats-strip .stat .num{font-family:'EB Garamond',serif;font-size:clamp(2.4rem,4vw,3.6rem);color:var(--accent);line-height:1}
.stats-strip .stat .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--grey);margin-top:6px;display:block}
.stats-strip .stat small{display:block;font-size:13px;color:var(--grey);margin-top:6px;max-width:30ch}

/* Value cards */
.value-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.value-grid{grid-template-columns:repeat(3,1fr)}}
.value-card{background:#fff;border:1px solid var(--hairline);padding:28px;border-radius:10px;transition:transform .3s ease,box-shadow .3s ease}
.value-card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -28px rgba(36,24,19,.35)}
.value-card h3{margin-bottom:10px}
.value-card.accent{background:var(--accent);color:var(--soft);border-color:var(--accent)}
.value-card.accent h3,.value-card.accent .eyebrow{color:var(--soft)}
.value-card.accent .eyebrow::before{background:var(--soft)}
.value-card.accent p{color:rgba(248,240,228,0.9)}

/* Programme cards */
.prog-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:640px){.prog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.prog-grid{grid-template-columns:repeat(3,1fr)}}
.prog-card{background:#fff;border:1px solid var(--hairline);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.prog-card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -28px rgba(36,24,19,.35)}
.prog-card img{aspect-ratio:3/2;width:100%;object-fit:cover}
.prog-card .body{padding:22px}
.prog-card h3{margin:6px 0 8px;font-size:1.4rem}
.prog-card .read-more{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent);display:inline-flex;align-items:center;gap:6px;margin-top:10px}

/* Donation campaign */
.campaign{position:relative;overflow:hidden;border-radius:14px;background:var(--charcoal);color:var(--soft)}
.campaign .grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:900px){.campaign .grid{grid-template-columns:1.1fr 1fr}}
.campaign img{width:100%;height:100%;object-fit:cover;min-height:280px}
.campaign .copy{padding:36px 32px}
.campaign h2,.campaign .eyebrow{color:var(--soft)}
.campaign .eyebrow::before{background:var(--soft)}
.progress-rail{height:6px;background:rgba(248,240,228,0.18);border-radius:6px;overflow:hidden;margin:18px 0 8px}
.progress-rail .progress-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:6px;transition:width 1.6s cubic-bezier(.16,.84,.44,1)}
.campaign .meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(248,240,228,0.82);display:flex;justify-content:space-between}

/* Volunteer roles strip (dark) */
.dark-strip{background:var(--charcoal);color:var(--soft)}
.dark-strip h2,.dark-strip h3{color:var(--soft)}
.dark-strip .role-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.dark-strip .role-grid{grid-template-columns:repeat(3,1fr)}}
.role-card{padding:24px;border:1px solid rgba(248,240,228,0.16);border-radius:10px;background:rgba(248,240,228,0.04)}
.role-card .commitment{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(248,240,228,0.72);display:block;margin-bottom:8px}
.role-card a{color:var(--soft);border-bottom:1px solid rgba(248,240,228,0.4);padding-bottom:1px}

/* Story cards */
.story-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.story-grid{grid-template-columns:repeat(3,1fr)}}
.story-card{background:#fff;border:1px solid var(--hairline);border-radius:10px;overflow:hidden}
.story-card img{aspect-ratio:4/5;width:100%;object-fit:cover;filter:grayscale(40%) contrast(1.04)}
.story-card .body{padding:22px}
.story-card .who{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--grey);margin-bottom:6px;display:block}
.story-card h3{font-size:1.35rem;margin:6px 0 10px}

/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:240px;border-bottom:1px solid var(--hairline);padding:0 6px 0 0;margin:0 0 12px}
.bar-chart .bar{flex:1;background:var(--accent);border-radius:6px 6px 0 0;height:0;transition:height 1.4s cubic-bezier(.16,.84,.44,1);position:relative;min-height:6px}
.bar-chart .bar::after{content:attr(data-label);position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--grey);text-transform:uppercase;letter-spacing:0.12em}
.bar-chart .bar::before{content:attr(data-value);position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink)}
.bar-chart-wrap{padding:32px 0 36px}

/* Event row */
.event-row{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.event-row{grid-template-columns:repeat(3,1fr)}}
.event-card{background:#fff;border:1px solid var(--hairline);border-radius:10px;padding:22px;display:flex;gap:18px}
.event-card .date-block{flex:0 0 auto;width:62px;text-align:center;border-right:1px solid var(--hairline);padding-right:14px}
.event-card .date-block .d{font-family:'EB Garamond',serif;font-size:32px;line-height:1;color:var(--accent)}
.event-card .date-block .m{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:10.5px;letter-spacing:0.16em;color:var(--grey);margin-top:4px;display:block}
.event-card h3{font-size:1.2rem;margin:0 0 6px}
.event-card .venue{font-size:13.5px;color:var(--grey);font-style:italic;margin-bottom:6px}

/* News preview row */
.news-row{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.news-row{grid-template-columns:repeat(3,1fr)}}
.news-card{background:#fff;border:1px solid var(--hairline);border-radius:10px;overflow:hidden}
.news-card img{aspect-ratio:3/2;width:100%;object-fit:cover}
.news-card .body{padding:20px}
.news-card .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--grey);display:block;margin-bottom:8px}
.news-card h3{font-size:1.25rem;margin:0 0 8px}
.news-card p{font-size:15px;color:var(--grey);margin:0}

/* Testimonials carousel */
.t-carousel{position:relative;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:36px 22px 28px;overflow:hidden}
@media (min-width:768px){.t-carousel{padding:48px 56px 38px}}
.t-track{display:flex;transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.t-slide{flex:0 0 100%;padding:0 6px}
.t-slide blockquote{margin:0;font-family:'EB Garamond',serif;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.4;color:var(--ink);text-wrap:balance}
.t-slide .who{display:flex;align-items:center;gap:14px;margin-top:22px}
.t-slide .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(60%)}
.t-slide .who .meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}
.t-slide .who .name{font-family:'EB Garamond',serif;font-size:18px;color:var(--ink);display:block;margin-bottom:2px}
.t-controls{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.t-controls .dots{display:flex;gap:8px}
.t-controls .dot{background:none;border:1px solid var(--hairline);width:10px;height:10px;border-radius:50%;cursor:pointer;padding:0}
.t-controls .dot[aria-current="true"]{background:var(--accent);border-color:var(--accent)}
.t-controls .arrows{display:flex;gap:6px}
.t-controls .arrow{background:var(--soft);border:1px solid var(--hairline);width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.t-controls .arrow:hover{background:var(--accent);color:var(--soft);border-color:var(--accent)}

/* Partners marquee */
.partners-marquee{overflow:hidden;position:relative;mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
.partners-track{display:flex;gap:60px;align-items:center;animation:scroll-x 38s linear infinite;width:max-content}
.partners-track img{height:48px;width:auto;opacity:.72;filter:grayscale(100%);transition:opacity .3s,filter .3s}
.partners-track img:hover{opacity:1;filter:grayscale(0)}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.partners-track{animation:none}}

/* Newsletter card */
.newsletter-card{background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:36px}
.newsletter-card .grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
@media (min-width:900px){.newsletter-card .grid{grid-template-columns:1.2fr 1fr}}
.newsletter-card form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-card input[type=email]{flex:1;min-width:180px;border:1px solid var(--hairline);background:var(--soft);padding:12px 14px;border-radius:999px;font:inherit;color:var(--ink)}
.newsletter-card button{flex:0 0 auto}

/* Footer */
.site-footer{background:var(--charcoal);color:rgba(248,240,228,0.86);padding:64px 0 0;margin-top:80px}
.site-footer .wordmark{font-family:'EB Garamond',serif;font-size:clamp(2.4rem,5vw,4rem);color:var(--soft);letter-spacing:-0.01em;line-height:1.05;margin:0 0 28px}
.site-footer .colophon{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:768px){.site-footer .colophon{grid-template-columns:repeat(4,1fr)}}
.site-footer h4{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:11px;letter-spacing:0.16em;color:rgba(248,240,228,0.62);margin:0 0 14px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-family:'EB Garamond',serif;font-size:17px}
.site-footer a{color:rgba(248,240,228,0.86)}
.site-footer a:hover{color:var(--soft)}
.site-footer .colophon address{font-style:normal;font-size:15px;line-height:1.65}
.site-footer .colophon form{display:flex;gap:6px;margin-top:8px}
.site-footer .colophon input{flex:1;min-width:0;border:1px solid rgba(248,240,228,0.18);background:rgba(248,240,228,0.06);padding:10px 12px;border-radius:999px;color:var(--soft);font:inherit;font-size:14px}
.site-footer .colophon button{background:var(--accent);color:var(--soft);border:1px solid var(--accent);padding:0 16px;border-radius:999px;font:inherit;cursor:pointer;font-size:14px}
.site-footer .colophon button:hover{background:var(--accent-2)}
.site-footer .strip{border-top:1px solid rgba(248,240,228,0.14);margin-top:48px;padding:18px 0 22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(248,240,228,0.62)}
.site-footer .strip a{color:rgba(248,240,228,0.62)}
.site-footer .strip a:hover{color:var(--soft)}

/* Breadcrumb */
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--grey);padding:24px 0 0}
.breadcrumb a{color:var(--grey)}
.breadcrumb a:hover{color:var(--accent-2)}
.breadcrumb .sep{margin:0 8px;color:var(--hairline)}

/* Page title block */
.page-title{padding:36px 0 8px;max-width:880px}
.page-title h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:14px}
.page-title .standfirst{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--grey);line-height:1.5;max-width:64ch}

/* Long-form prose */
.prose{max-width:64ch;font-size:18px;line-height:1.75}
.prose h2{margin-top:1.6em;font-size:1.7rem}
.prose h3{margin-top:1.3em;font-size:1.3rem}
.prose ul,.prose ol{padding-left:1.4em}
.prose figure{margin:1.8em 0}
.prose figcaption{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:0.12em;margin-top:8px}
.prose blockquote{margin:1.4em 0;border-left:3px solid var(--accent);padding:6px 18px;font-style:italic;color:var(--grey)}

.pull-quote{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.3;color:var(--accent-2);max-width:30ch;margin:48px auto;position:relative;text-align:center;padding:0 20px}
.pull-quote::before{content:"\201C";font-size:5rem;color:var(--accent);position:absolute;left:-20px;top:-32px;line-height:1;font-style:normal}
.pull-quote cite{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-top:18px}

.drop-cap:first-letter{
  float:left;font-family:'EB Garamond',serif;font-weight:500;
  font-size:4em;line-height:0.85;margin:6px 8px 0 0;color:var(--accent);
}

/* Timeline */
.timeline{position:relative;padding-left:34px;margin:32px 0}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--hairline)}
.timeline-item{position:relative;margin-bottom:32px}
.timeline-item::before{content:"";position:absolute;left:-30px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--soft);border:2px solid var(--accent)}
.timeline-item .year{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:0.16em;color:var(--accent);display:block;margin-bottom:6px}
.timeline-item h3{font-size:1.3rem;margin:0 0 8px}

/* Trustees grid */
.trustee-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:640px){.trustee-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.trustee-grid{grid-template-columns:repeat(4,1fr)}}
.trustee-card{text-align:left}
.trustee-card img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:8px;filter:grayscale(70%) contrast(1.05)}
.trustee-card h3{font-size:1.15rem;margin:14px 0 4px}
.trustee-card .role{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent);display:block;margin-bottom:8px}

/* Theory of change diagram */
.toc-diagram{display:grid;grid-template-columns:1fr;gap:20px;margin:32px 0}
@media (min-width:768px){.toc-diagram{grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:stretch}}
.toc-block{background:#fff;border:1px solid var(--hairline);padding:24px;border-radius:10px}
.toc-block .step{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent);display:block;margin-bottom:8px}
.toc-arrow{display:none}
@media (min-width:768px){.toc-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px}}

/* Donation tiles */
.amount-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0 18px}
@media (min-width:640px){.amount-tiles{grid-template-columns:repeat(4,1fr)}}
.amount-tile{position:relative;background:#fff;border:1px solid var(--hairline);padding:18px;border-radius:8px;cursor:pointer;text-align:center;transition:all .2s}
.amount-tile input{position:absolute;opacity:0;pointer-events:none}
.amount-tile .amt{font-family:'EB Garamond',serif;font-size:1.8rem;color:var(--ink)}
.amount-tile small{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--grey);display:block;margin-top:4px}
.amount-tile.is-selected,.amount-tile:has(input:checked){border-color:var(--accent);background:rgba(181,86,59,0.06);box-shadow:inset 0 0 0 1px var(--accent)}
.amount-tile .check{position:absolute;top:8px;right:8px;color:var(--accent);opacity:0}
.amount-tile.is-selected .check{opacity:1}

.toggle-group{display:inline-flex;background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:4px}
.toggle-group label{padding:8px 18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:0.14em;cursor:pointer;border-radius:999px;color:var(--grey)}
.toggle-group input{position:absolute;opacity:0;pointer-events:none}
.toggle-group label:has(input:checked){background:var(--accent);color:var(--soft)}

.form-field{margin-bottom:16px;display:block}
.form-field label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--grey);display:block;margin-bottom:6px}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--hairline);background:#fff;padding:12px 14px;border-radius:8px;font:inherit;color:var(--ink)}
.form-field textarea{min-height:140px;resize:vertical}
.form-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--grey)}
.form-checkbox input{margin-top:5px}

.form-row{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}

.fake-card{background:linear-gradient(135deg,#2c1f18 0%,#3c2a20 100%);color:var(--soft);padding:22px;border-radius:14px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;margin:8px 0 18px;font-size:14px;line-height:1.6}
.fake-card .row{display:flex;justify-content:space-between;gap:16px;margin-top:8px}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hairline);padding:6px 0}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;font-family:'EB Garamond',serif;font-size:1.2rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{flex:0 0 auto;color:var(--accent);font-size:14px;transition:transform .25s ease;margin-top:6px}
.faq-item[open] summary .icon{transform:rotate(45deg)}
.faq-item .answer{padding:0 0 22px;max-width:64ch;color:var(--grey)}

/* CTA strip */
.cta-strip{background:var(--accent);color:var(--soft);padding:54px 0;text-align:center;border-radius:0}
.cta-strip h2{color:var(--soft);margin-bottom:14px;text-wrap:balance}
.cta-strip p{color:rgba(248,240,228,0.92);max-width:50ch;margin:0 auto 22px}
.cta-strip .ctas{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* In-short box (legal) */
.in-short{background:#fff;border:1px solid var(--hairline);border-left:4px solid var(--accent);padding:22px 26px;border-radius:8px;margin-bottom:32px}
.in-short h2{font-size:1.3rem;margin:0 0 10px}
.in-short ul{padding-left:1.2em;margin:0}
.in-short li{margin-bottom:6px;color:var(--grey)}

/* Resource & report list */
.resource-list{display:grid;grid-template-columns:1fr;gap:16px}
.resource-row{display:flex;align-items:center;gap:20px;border:1px solid var(--hairline);background:#fff;padding:18px 22px;border-radius:10px}
.resource-row .ico{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--soft);display:inline-flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px}
.resource-row .info{flex:1}
.resource-row .info h3{margin:0 0 4px;font-size:1.15rem}
.resource-row .info .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}
.resource-row a.dl{flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;background:transparent;cursor:pointer}
.resource-row a.dl:hover{background:var(--accent);color:var(--soft)}

/* Organic shape */
.organic-shape{position:absolute;border-radius:71% 29% 64% 36% / 41% 60% 40% 59%;background:var(--accent);opacity:0.07;pointer-events:none;filter:blur(6px)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;z-index:500;padding:20px;
}
.modal-backdrop.open{display:flex}
.modal-card{
  background:var(--soft);border-left:4px solid var(--accent);
  max-width:520px;width:100%;padding:34px;border-radius:10px;
  box-shadow:0 32px 80px -32px rgba(36,24,19,0.55);
}
.modal-card h3{margin:0 0 12px;font-size:1.7rem}
.modal-card p{color:var(--grey);font-size:16px}
.modal-card .ref{font-family:'IBM Plex Mono',monospace;background:#fff;border:1px solid var(--hairline);padding:8px 12px;border-radius:6px;display:inline-block;margin-top:8px;font-size:13px;color:var(--ink)}
.modal-card .close{margin-top:22px;background:var(--accent);color:var(--soft);border:0;padding:12px 22px;border-radius:999px;font:inherit;cursor:pointer}
.modal-card .close:hover{background:var(--accent-2)}

/* Cookie banner */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:400;
  background:var(--ink);color:var(--soft);padding:18px 22px;
  border-radius:12px;box-shadow:0 24px 60px -28px rgba(36,24,19,0.6);
  display:none;align-items:center;gap:20px;flex-wrap:wrap;
}
.cookie-banner.open{display:flex}
.cookie-banner p{margin:0;flex:1;min-width:200px;font-size:14.5px;color:rgba(248,240,228,0.86)}
.cookie-banner button{background:var(--accent);color:var(--soft);border:0;padding:10px 18px;border-radius:999px;font:inherit;cursor:pointer;font-size:13.5px}
.cookie-banner button.alt{background:transparent;color:var(--soft);border:1px solid rgba(248,240,228,0.4)}
.cookie-banner button:hover{filter:brightness(1.1)}

/* Map placeholder */
.map-card{border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:#fff}
.map-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.map-card .info{padding:22px}

/* Utility */
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:32px}
.section-head .lead{max-width:54ch}
.section-head .link{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent)}
.divider{border:0;border-top:1px solid var(--hairline);margin:32px 0}
.counter{font-variant-numeric:tabular-nums}

/* Article hero */
.article-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden;background:#1a110c}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(36,24,19,0.1) 30%,rgba(36,24,19,0.78) 100%)}
.article-hero .container{position:relative;z-index:2;padding:0 22px 70px;color:var(--soft)}
.article-hero h1{color:var(--soft);max-width:22ch}
.article-hero .meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(248,240,228,0.82);margin-top:14px}

/* Partner logo grid */
.partner-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (min-width:768px){.partner-grid{grid-template-columns:repeat(4,1fr)}}
.partner-card{background:#fff;border:1px solid var(--hairline);border-radius:10px;padding:24px;text-align:center}
.partner-card img{height:60px;width:auto;margin:0 auto 12px;filter:grayscale(80%);opacity:.86}
.partner-card .name{font-family:'EB Garamond',serif;font-size:1.05rem;color:var(--ink);display:block;margin-bottom:4px}
.partner-card .role{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}

/* Testimonial long-form list */
.testimonial-long{display:grid;grid-template-columns:1fr;gap:36px;margin:32px 0}
@media (min-width:900px){.testimonial-long .row{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:flex-start}}
.testimonial-long img{width:100%;max-width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:8px;filter:grayscale(60%)}
.testimonial-long .quote{font-family:'EB Garamond',serif;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.45;color:var(--ink)}
.testimonial-long .attrib{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-top:14px}

/* Small helpers */
.text-grey{color:var(--grey)}
.text-accent{color:var(--accent)}
.bg-soft{background:var(--soft)}
.bg-charcoal{background:var(--charcoal);color:var(--soft)}
.center{text-align:center}
.flex-center{display:flex;align-items:center;justify-content:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-8{margin-top:48px}
.mb-8{margin-bottom:48px}
.mt-4{margin-top:24px}
.mb-4{margin-bottom:24px}

@media print{
  .site-header,.site-footer,.cookie-banner,.cta-strip,.modal-backdrop{display:none !important}
  body{background:#fff;color:#000}
}
