/* ============================================================
   NEELAMBARI FOUNDATION — SITE STYLES
   Design tokens carried over from the Foundation's deck series
   for brand consistency across all materials.
   ============================================================ */

:root{
  --ink:        #2B1712;
  --berry:      #6D2E46;
  --berry-dark: #4A1F30;
  --sky:        #1CA9E8;
  --sky-dark:   #127BA8;
  --dusty:      #C9A9A6;
  --cream:      #F3ECE1;
  --offwhite:   #FCFAF6;
  --border-cream: #E4D9C8;

  --font-head: Cambria, Georgia, "Times New Roman", serif;
  --font-body: Calibri, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1180px;
  --radius: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--offwhite);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 .4em;
  line-height:1.15;
  font-weight:400;
}
h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
a{ color:var(--berry); text-decoration:none; }
a:hover{ color:var(--sky-dark); }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

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

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.5rem;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--berry);
  font-weight:700;
  margin-bottom:.7em;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--sky);
  transform:rotate(45deg);
  display:inline-block;
}

/* ---------- Diamond motif — signature element ---------- */
.diamond-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:2.5rem 0;
}
.diamond-divider span{
  width:9px;height:9px;
  border:1.5px solid var(--berry);
  transform:rotate(45deg);
}
.diamond-divider span.fill{ background:var(--sky); border-color:var(--sky); }
.diamond-divider::before,
.diamond-divider::after{
  content:"";
  height:1px;
  width:64px;
  background:var(--border-cream);
}

.diamond-frame{
  position:relative;
  display:inline-block;
  padding:14px;
}
.diamond-frame::before{
  content:"";
  position:absolute; inset:0;
  border:1.5px solid var(--ink);
  transform:rotate(0deg);
  clip-path:polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
  pointer-events:none;
}
.diamond-frame img{
  clip-path:polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
  width:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--cream);
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(252,250,246,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-cream);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.7rem; padding-bottom:.7rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--ink);
}
.brand img{ height:38px; width:auto; }
.brand strong{ display:block; font-size:1rem; }
.brand small{ display:block; font-size:.7rem; letter-spacing:.08em; color:var(--berry); font-weight:400; }

.nav-links{ display:flex; gap:1.6rem; align-items:center; }
.nav-links a{
  color:var(--ink); font-size:.92rem; font-weight:600;
  position:relative; padding:.3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--sky);
  transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  background:var(--berry); color:var(--offwhite) !important;
  padding:.55rem 1.1rem !important; border-radius:2px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--berry-dark); color:var(--offwhite) !important; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:34px; height:26px; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:2px; background:var(--ink);
}
.nav-toggle span{ top:12px; }
.nav-toggle span::before{ top:-9px; }
.nav-toggle span::after{ top:9px; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:60px 0 0 0; background:var(--offwhite);
    flex-direction:column; padding:2rem 1.5rem; gap:1.4rem;
    transform:translateX(100%); transition:transform .3s ease;
    border-top:1px solid var(--border-cream);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(circle at 85% 15%, rgba(28,169,232,.10), transparent 45%),
    linear-gradient(180deg, var(--ink) 0%, #1c0f0b 100%);
  color:var(--offwhite);
  position:relative;
  overflow:hidden;
  padding:5.5rem 0 5rem;
}
.hero::before{
  /* diamond grid watermark echoing the logo mark */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%);
  background-size:64px 64px;
  background-position:0 0, 32px 32px;
  opacity:.5;
  pointer-events:none;
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  align-items:center;
}
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; text-align:center; }
  .hero-mark{ margin:0 auto; }
}
.hero-mark{
  opacity:0;
  animation:markIn 1s ease .1s forwards;
  width:min(260px, 60vw);
}
@keyframes markIn{
  from{ opacity:0; transform:scale(.7) rotate(-8deg); }
  to{ opacity:1; transform:scale(1) rotate(0); }
}
.hero-dev{
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--dusty);
  letter-spacing:.04em;
  margin-bottom:.3rem;
}
.hero h1{ color:var(--offwhite); }
.hero h1 em{
  font-style:normal;
  color:var(--sky);
}
.hero-tagline{
  font-family:var(--font-head);
  font-style:italic;
  font-size:1.25rem;
  color:var(--cream);
  border-left:2px solid var(--sky);
  padding-left:1rem;
  margin:1.2rem 0 1.5rem;
}
@media (max-width:900px){ .hero-tagline{ border-left:none; border-top:2px solid var(--sky); padding-left:0; padding-top:.8rem; } }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:900px){ .hero-actions{ justify-content:center; } }

.btn{
  display:inline-block;
  padding:.85rem 1.6rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  border-radius:2px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}
.btn-primary{ background:var(--sky); color:var(--ink); }
.btn-primary:hover{ background:#4bbdec; color:var(--ink); }
.btn-outline{ border-color:rgba(252,250,246,.5); color:var(--offwhite); }
.btn-outline:hover{ border-color:var(--sky); color:var(--sky); }
.btn-berry{ background:var(--berry); color:var(--offwhite); }
.btn-berry:hover{ background:var(--berry-dark); color:var(--offwhite); }

/* ---------- Stats ---------- */
.stats{
  background:var(--berry);
  color:var(--offwhite);
  padding:2.4rem 0;
}
.stats .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  text-align:center;
}
@media (max-width:760px){ .stats .wrap{ grid-template-columns:repeat(2,1fr); } }
.stat-num{
  font-family:var(--font-head);
  font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--sky);
  display:block;
}
.stat-label{ font-size:.82rem; letter-spacing:.03em; opacity:.9; }

/* ---------- Sections ---------- */
section{ padding:5rem 0; }
.section-cream{ background:var(--cream); }
.section-head{ max-width:640px; margin-bottom:2.6rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- About / Founder ---------- */
.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:3.5rem;
  align-items:start;
}
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{ position:sticky; top:100px; text-align:center; }
@media (max-width:860px){ .about-photo{ position:static; max-width:320px; margin:0 auto 2rem; } }
.about-photo .diamond-frame{ width:100%; max-width:300px; }
.founder-name{ margin-top:1rem; font-size:1.2rem; }
.founder-role{ color:var(--berry); font-weight:700; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; }

.works-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.5rem;
  margin:1rem 0 1.5rem;
}
@media (max-width:520px){ .works-grid{ grid-template-columns:1fr; } }
.works-grid li{
  padding-left:1.1rem; position:relative; font-size:.95rem;
}
.works-grid li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:6px;height:6px; background:var(--sky); transform:rotate(45deg);
}
.works-grid .pub{ color:#7a6a5f; font-size:.85rem; }

.recognition-box{
  background:var(--offwhite);
  border:1px solid var(--border-cream);
  border-left:3px solid var(--sky);
  padding:1.3rem 1.5rem;
  margin-top:1.2rem;
  font-size:.95rem;
}
.recognition-box strong{ display:block; margin-bottom:.3em; font-family:var(--font-head); color:var(--berry); }

/* ---------- What we do ---------- */
.do-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
@media (max-width:900px){ .do-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .do-grid{ grid-template-columns:1fr; } }
.do-card{
  background:var(--offwhite);
  border:1px solid var(--border-cream);
  padding:1.8rem 1.5rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.do-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px -12px rgba(43,23,18,.18); }
.do-icon{
  width:40px;height:40px;
  border:2px solid var(--berry);
  transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem;
}
.do-icon span{ transform:rotate(-45deg); font-size:1.1rem; color:var(--berry); }
.do-card h3{ font-size:1.05rem; margin-bottom:.4em; }
.do-card p{ font-size:.9rem; color:#5c4d44; margin:0; }

/* ---------- Programs list ---------- */
.chapter-block{ margin-bottom:2.6rem; }
.chapter-block:last-child{ margin-bottom:0; }
.chapter-title{
  font-family:var(--font-head);
  color:var(--berry);
  font-size:1.05rem;
  border-bottom:1px solid var(--border-cream);
  padding-bottom:.6rem;
  margin-bottom:1rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.chapter-title span{ font-size:.78rem; color:#8a7a6f; font-weight:400; font-family:var(--font-body); }

.program-item{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:1.2rem;
  align-items:center;
  padding:.95rem .3rem;
  border-bottom:1px dashed var(--border-cream);
}
@media (max-width:640px){
  .program-item{ grid-template-columns:1fr; gap:.3rem; padding:1rem .3rem; }
}
.program-date{
  font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--sky-dark); font-weight:700;
}
.program-name{ font-size:1rem; color:var(--ink); font-weight:600; }
.program-venue{ font-size:.83rem; color:#8a7a6f; margin-top:.1rem; }
.program-status{
  font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;
  color:#a6988d; border:1px solid var(--border-cream); padding:.3rem .6rem;
  white-space:nowrap;
}

/* ---------- Team ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem;
}
@media (max-width:760px){ .team-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
.team-card{
  background:var(--offwhite);
  border:1px solid var(--border-cream);
  padding:2rem;
  text-align:center;
}
.team-card .diamond-frame{ width:150px; margin-bottom:1rem; }
.team-card h3{ margin-bottom:.1em; }
.team-role{ color:var(--berry); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.9em; display:block; }
.team-card p{ font-size:.92rem; color:#5c4d44; text-align:left; }

/* ---------- Press ---------- */
.press-strip{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
}
.press-chip{
  border:1px solid var(--border-cream);
  background:var(--offwhite);
  padding:.6rem 1.1rem;
  font-size:.85rem;
  color:var(--ink);
}

/* ---------- Contact / Footer ---------- */
.contact-band{
  background:var(--ink); color:var(--offwhite);
}
.contact-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:3rem;
}
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-grid h2{ color:var(--offwhite); }
.contact-list{ margin-top:1.4rem; }
.contact-list li{ margin-bottom:.9rem; font-size:.98rem; }
.contact-list a{ color:var(--cream); }
.contact-list a:hover{ color:var(--sky); }
.contact-list .label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--dusty); margin-bottom:.15em; }

.social-row{ display:flex; gap:.9rem; margin-top:1.6rem; }
.social-row a{
  width:42px; height:42px;
  border:1px solid rgba(252,250,246,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--offwhite);
  border-radius:50%;
  transition:all .2s ease;
}
.social-row a:hover{ border-color:var(--sky); color:var(--sky); transform:translateY(-3px); }
.social-row svg{ width:18px; height:18px; fill:currentColor; }

.donate-box{
  background:rgba(252,250,246,.06);
  border:1px solid rgba(252,250,246,.15);
  padding:1.8rem;
}
.donate-box h3{ color:var(--offwhite); }
.donate-box p{ font-size:.9rem; color:var(--cream); }

.site-footer{
  text-align:center;
  font-size:.8rem;
  color:#8a7a6f;
  padding:1.6rem 0;
  background:var(--offwhite);
  border-top:1px solid var(--border-cream);
}
.site-footer strong{ color:var(--berry); }

/* ---------- Showcase slideshow ---------- */
.showcase{
  background:var(--ink);
  padding:4.5rem 0 5rem;
}
.showcase .section-head{ color:var(--offwhite); }
.showcase .section-head h2{ color:var(--offwhite); }
.showcase .section-head p{ color:var(--dusty); }
.showcase .eyebrow{ color:var(--sky); }
.showcase .eyebrow::before{ background:var(--sky); }

.slideshow{
  position:relative;
  max-width:920px;
  margin:0 auto;
  user-select:none;
}
.slideshow-frame{
  position:relative;
  aspect-ratio:1280/720;
  background:#150b08;
  border:1px solid rgba(252,250,246,.14);
  overflow:hidden;
}
.slideshow-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .45s ease;
}
.slideshow-frame img.active{ opacity:1; }

.slide-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  background:rgba(43,23,18,.55);
  border:1px solid rgba(252,250,246,.35);
  color:var(--offwhite);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:1.2rem;
  transition:background .2s ease, border-color .2s ease;
  z-index:2;
}
.slide-btn:hover{ background:rgba(28,169,232,.5); border-color:var(--sky); }
.slide-prev{ left:14px; }
.slide-next{ right:14px; }

.slideshow-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1.1rem;
  color:var(--dusty);
  font-size:.82rem;
}
.slideshow-dots{
  display:flex; gap:7px; flex-wrap:wrap; justify-content:center;
  max-width:70%;
}
.slideshow-dots button{
  width:7px; height:7px;
  border:1.5px solid var(--dusty);
  background:transparent;
  transform:rotate(45deg);
  padding:0; cursor:pointer;
}
.slideshow-dots button.active{ background:var(--sky); border-color:var(--sky); }
.slideshow-count{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.slideshow-playpause{
  background:none; border:1px solid rgba(252,250,246,.3); color:var(--offwhite);
  width:30px; height:30px; cursor:pointer; font-size:.75rem;
  display:flex; align-items:center; justify-content:center;
}
.slideshow-playpause:hover{ border-color:var(--sky); color:var(--sky); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }