:root{
  --maroon:#8B0000; --maroon-2:#A52A2A; --gold:#D4AF37;
  --ink:#222; --muted:#666; --bg:#fff; --panel:#f7f7f7; --border:#e7e7e7;
  --shadow:0 8px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:var(--bg);line-height:1.65}
.no-scroll{overflow:hidden}
.container{max-width:1100px;margin:0 auto;padding:0 1.1rem}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;gap:.75rem;padding:.7rem 0}
.logo{font-weight:800;color:var(--maroon);text-decoration:none;font-size:1.25rem;letter-spacing:.3px}
.nav-menu{list-style:none;display:flex;gap:1rem;margin-left:auto}
.nav-link{text-decoration:none;color:var(--ink);padding:.4rem .2rem;border-radius:.3rem}
.nav-link:hover,.nav-link.active{color:var(--maroon)}
.admin-link{margin-left:.5rem;text-decoration:none;background:var(--maroon);color:#fff;padding:.45rem .7rem;border-radius:.5rem;box-shadow:var(--shadow);white-space:nowrap}
.nav-toggle{display:none;border:0;background:transparent;font-size:1.5rem;margin-left:auto}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none}
.mobile-drawer.open{display:block}
.drawer-inner{position:absolute;right:0;top:0;height:100%;width:min(80vw,320px);background:#fff;padding:1rem;display:flex;flex-direction:column;gap:.4rem;box-shadow:var(--shadow)}
.drawer-link{display:block;padding:.8rem 1rem;border-radius:.6rem;text-decoration:none;color:var(--ink)}
.drawer-link.active,.drawer-link:hover{background:var(--panel);color:var(--maroon)}

@media (max-width:950px){
  .nav-toggle{display:block}
  .nav-menu{display:none}
  .admin-link{display:none}
}

/* Sections */
.section{padding:3.2rem 0}
.section-header{text-align:center;margin-bottom:1.6rem}
.section-header h2{font-weight:300;font-size:2rem;color:var(--maroon);margin:.2rem 0}
.section-header p{color:var(--muted)}

/* Hero */
.hero{background:linear-gradient(120deg,var(--maroon) 0%, var(--maroon-2) 60%);padding:3.5rem 0;color:#fff}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem;align-items:center}
.hero h1{font-size:3rem;margin:0 0 .4rem}
.hero p{color:#ffe9e9}
.hero-ctas{display:flex;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid var(--ink);padding:.6rem .9rem;border-radius:.55rem;text-decoration:none;color:var(--ink);background:#fff}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#231a00}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.hero-grid{height:48vh;border-radius:1rem;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.hero-tile{background:linear-gradient(135deg,#ffffff22,#00000011);border:1px solid #ffffff22;border-radius:.5rem}
.hero-tile img{width:100%;height:100%;object-fit:cover;display:block}

/* Cards / grids */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.card{background:#fff;border:1px solid var(--border);border-radius:.9rem;padding:1.1rem;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.card h3{color:var(--maroon);margin:.2rem 0 .45rem}

/* Events */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}
.filter-chip{border:1px solid var(--border);padding:.35rem .7rem;border-radius:999px;background:#fff;cursor:pointer}
.filter-chip.active{background:var(--maroon);border-color:var(--maroon);color:#fff}
.events-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.event{border-left:4px solid var(--gold);background:#fff;border:1px solid var(--border);border-radius:.8rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.event .thumb{width:100%;aspect-ratio:16/9;border-radius:.5rem;object-fit:cover;background:#eee}
.event .date{color:var(--maroon);font-weight:600}
.event .badge{display:inline-block;background:var(--maroon);color:#fff;padding:.2rem .5rem;border-radius:999px;font-size:.75rem}

/* Gallery */
.gallery-grid{columns:3 250px;column-gap:1rem}
.gallery-item{display:inline-block;width:100%;margin:0 0 1rem;background:#fff;border:1px solid var(--border);border-radius:.8rem;overflow:hidden}
.gallery-item img{width:100%;display:block;object-fit:cover}
.gallery-item .meta{padding:.8rem}
.gallery-item h4{color:var(--maroon);margin:0 0 .3rem}

/* Donate (tabs, forms, goals, donor wall) */
.donate-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}
.tab-btn{border:1px solid var(--border);background:#fff;padding:.5rem .9rem;border-radius:999px;cursor:pointer}
.tab-btn.active{background:var(--maroon);border-color:var(--maroon);color:#fff}
.form-card{border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1rem;display:none}
.form-card.active{display:block}
.stack{display:grid;gap:.75rem;margin-top:.8rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.stack input,.stack textarea{width:100%;padding:.6rem;border:1px solid var(--border);border-radius:.5rem}
.muted{color:var(--muted);font-size:.9rem}

.goal-wrap{margin-top:1.5rem;border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1rem}
.goals{display:grid;gap:.8rem}
.goal{border:1px solid var(--border);border-radius:.6rem;padding:.7rem;background:var(--panel)}
.progress{height:10px;border-radius:999px;background:#eee;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--maroon);width:0%}
.goal .meta{display:flex;justify-content:space-between;font-size:.9rem;color:#444;margin-top:.35rem}

.donor-wall{margin-top:1.5rem}
.donors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem}
.donor{border:1px solid var(--border);background:#fff;border-radius:.75rem;padding:.8rem}
.donor .kind{display:inline-block;background:var(--maroon);color:#fff;font-size:.75rem;padding:.15rem .5rem;border-radius:999px;margin-bottom:.35rem}
.donor .note{color:#444;font-size:.95rem;margin-top:.3rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:1rem 0;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-admin{text-decoration:none;color:var(--maroon)}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-grid{height:36vh}
  .grid-2{grid-template-columns:1fr}
}
/* Home values */
/* About values grid: always 2-up on desktop */
.values{
  display:grid;
  grid-template-columns:repeat(2, minmax(320px,1fr));
  gap:1.25rem;
  justify-content:center;
}
@media (max-width:780px){
  .values{ grid-template-columns:1fr; }
}

.value{background:#fff;border:1px solid var(--border);border-radius:.9rem;padding:1rem;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.value h3{margin:.2rem 0 .4rem;color:var(--maroon)}
.value .icon{width:40px;height:40px;border-radius:999px;background:var(--panel);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;border:1px solid var(--border)}

/* ===== Leadership (revamp) ===== */
.leaders-featured{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1rem;
}
.leader-lg{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:1rem;
  align-items:center;
  border:1px solid var(--border);
  background:#fff;
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.leader-lg img{
  width:100px;height:100px;border-radius:999px;object-fit:cover;
  border:2px solid var(--border);background:#f0f0f0;
}
.leader-lg h3{margin:0;color:var(--maroon)}
.leader-lg .role{color:var(--gold);margin:.2rem 0 .2rem}

/* fixed 3-up grid on desktop, collapses on mobile */
.leadership-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.leader-sm{
  background:#fff;border:1px solid var(--border);border-radius:.9rem;
  padding:1rem;text-align:center;display:flex;flex-direction:column;gap:.4rem;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.leader-sm img{
  width:90px;height:90px;border-radius:999px;object-fit:cover;
  border:2px solid var(--border);background:#f0f0f0;align-self:center;
}
.leader-sm h4{margin:.15rem 0;color:var(--ink)}
.leader-sm .role{font-size:.9rem;color:var(--gold)}
.leader-sm a{word-break:break-all}

@media (max-width:900px){
  .leaders-featured{grid-template-columns:1fr}
  .leader-lg{grid-template-columns:90px 1fr}
  .leader-lg img{width:80px;height:80px}
  .leadership-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .leadership-grid{grid-template-columns:1fr}
}