/* Manav Garima Foundation
   Garima blue comes from the logo. Hi-vis yellow comes from the safety vests in the field photos
   and is kept for actions only. Lime-wash blue is the colour of basti walls. */
:root{
  --garima:#22398c;
  --night:#0f1a45;
  --hivis:#ffc72c;
  --wash:#e9eef8;
  --ink:#1a1f2e;
  --soft:#4b5266;
  --rule:#cfd6e6;
  --display:"Anek Latin","Arial Narrow",sans-serif;
  --text:"Mukta","Segoe UI",system-ui,sans-serif;
  --max:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 1.125rem/1.7 var(--text)}
img{display:block;max-width:100%}
a{color:var(--garima);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--hivis);outline-offset:2px}
p{margin:0 0 1.1em}
sup{font-size:.62em;line-height:0}
h1,h2,h3{font-family:var(--display);font-stretch:75%;font-weight:800;line-height:1;letter-spacing:-.005em;color:var(--night);margin:0 0 .5em}
h2{font-size:2.1rem}
h3{font-size:1.45rem;font-weight:700;line-height:1.1}
.bar{max-width:var(--max);margin:0 auto;padding:0 24px}
.block{padding-top:80px;padding-bottom:80px}
.read{max-width:820px}
.big{font-size:1.32rem;line-height:1.6}
.h-big{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:16ch}
.skip{position:absolute;left:-999px;top:8px;background:var(--hivis);color:var(--night);padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* masthead */
.masthead{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--rule)}
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--night);font:800 1.2rem/1 var(--display);font-stretch:75%}
.brand img{width:38px;height:auto}
.nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;padding:6px 10px}
.nav a:hover{color:var(--garima)}
.nav a[aria-current=page]{color:var(--garima);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.5em}
.nav a[href="donate.html"]{background:var(--hivis);color:var(--night);margin-left:6px;padding:6px 14px}
.menu{display:none;font:600 1rem var(--text);background:none;border:1px solid var(--rule);padding:6px 14px;cursor:pointer;color:var(--night)}
@media (max-width:1080px){
  .menu{display:block}
  .nav{display:none;position:absolute;inset:76px 0 auto 0;background:#fff;flex-direction:column;padding:8px 24px 20px;border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}
  .nav a{padding:12px 0;font-size:1.1rem}
  .nav a[href="donate.html"]{margin:8px 0 0;padding:12px 16px;align-self:flex-start}
}

/* home hero: the photo carries it, the name sits on a blue slab cut into the photo */
.hero{position:relative;background:var(--night)}
.hero-photo img{width:100%;height:min(74vh,720px);object-fit:cover;object-position:50% 35%}
.hero-type{position:relative;max-width:var(--max);margin:-9.5rem auto 0;padding:0 24px}
.hero-type h1{display:inline-block;background:var(--garima);color:#fff;font-size:clamp(3rem,9vw,7.6rem);line-height:.9;padding:.18em .22em .14em;margin:0;max-width:11ch}
.motto{display:flex;flex-wrap:wrap;gap:0;margin:0;font:700 1.25rem/1 var(--display);font-stretch:85%;color:#fff}
.motto span{padding:14px 18px 16px;background:var(--night)}
.motto span+span{border-left:1px solid rgba(255,255,255,.25)}
.intro{padding-top:72px;padding-bottom:24px;max-width:var(--max)}
.intro .big{max-width:62ch}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{display:inline-block;background:var(--hivis);color:var(--night);font-weight:700;text-decoration:none;padding:12px 22px;border:2px solid var(--hivis)}
.btn:hover{background:#ffd75e}
.btn.line{background:transparent;border-color:var(--night)}
.btn.line:hover{background:var(--night);color:#fff}

/* facts ledger */
.facts{padding:56px 0 24px}
.ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:3px solid var(--night)}
.ledger li{padding:18px 18px 0 0;display:flex;flex-direction:column;gap:6px}
.ledger li+li{padding-left:18px;border-left:1px solid var(--rule)}
.num{font:800 clamp(2rem,3.4vw,2.9rem)/1 var(--display);font-stretch:75%;color:var(--garima)}
.what{font-size:1rem;line-height:1.4;color:var(--soft)}

/* interventions */
.ivs{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:64px}
.ivs li{padding:26px 0;border-top:1px solid var(--rule)}
.ivs p{margin:0;color:var(--soft);max-width:60ch}

/* filmstrip */
.filmstrip{display:grid;grid-template-columns:repeat(8,1fr);gap:0}
.filmstrip img{width:100%;aspect-ratio:1;object-fit:cover}
.strip-link{padding-top:14px;padding-bottom:0}

.wash{background:var(--wash)}
.wash .two{padding-top:80px;padding-bottom:80px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.framed img{width:100%;aspect-ratio:3/2;object-fit:cover}
.text-link{font-weight:700}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.vm .h-big{font-size:clamp(2rem,3.4vw,2.6rem)}

/* inner page banner: blue panel with the title, photo beside it */
.banner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--garima);color:#fff;min-height:380px}
.banner-text{display:flex;flex-direction:column;justify-content:flex-end;padding:56px 24px 48px max(24px,calc((100vw - var(--max))/2 + 24px))}
.banner h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:.92;margin:0}
.banner-sub{margin:16px 0 0;font:700 1.15rem/1 var(--display);font-stretch:85%;color:var(--hivis)}
.banner-photo img{width:100%;height:100%;object-fit:cover}
.banner.plain{grid-template-columns:1fr;min-height:0}
.banner.plain .banner-text{padding-top:88px;padding-bottom:56px}

/* timeline: a real sequence, so it is marked as one */
.timeline{list-style:none;margin:0;padding:0;max-width:980px}
.timeline li{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:3px solid var(--night)}
.yr{font:800 2.4rem/1 var(--display);font-stretch:75%;color:var(--garima)}
.timeline p{margin:0;font-size:1.2rem}

/* programs */
.jump{position:sticky;top:76px;z-index:20;background:#fff;border-bottom:1px solid var(--rule)}
.jump .bar{display:flex;gap:4px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:thin}
.jump a{white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;padding:6px 12px;border:1px solid var(--rule)}
.jump a:hover{border-color:var(--garima);color:var(--garima)}
.prog{padding:72px 0 8px;scroll-margin-top:140px}
.strip{display:grid;gap:6px;max-width:var(--max);margin:0 auto;padding:0 24px}
.strip.n3{grid-template-columns:2fr 1fr 1fr}
.strip.n2{grid-template-columns:2fr 1fr}
.strip img{width:100%;height:340px;object-fit:cover}
.prog-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;max-width:var(--max);margin:0 auto;padding:40px 24px 0}
.prog-grid h2{font-size:clamp(2.2rem,3.6vw,3rem);position:sticky;top:150px;align-self:start}
.prog-body{max-width:72ch}
.lead-in{font-weight:700;margin-bottom:.4em}
.list{margin:0 0 1.4em;padding-left:1.15em}
.list li{margin-bottom:.5em;padding-left:.2em}
.list li::marker{color:var(--garima)}
.cost{background:var(--wash);border-left:6px solid var(--hivis);padding:16px 22px;margin:8px 0 1.4em}
.cost p{margin:0 0 .35em;font-weight:600}
.cost p:last-child{margin:0}
.emerging{padding-bottom:80px}
.emerging .block{padding-bottom:0}
.emerging .cost{background:#fff}

/* people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:64px 56px}
.person{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start}
.face img,.initials{width:150px;height:150px;object-fit:cover}
.initials{display:flex;align-items:center;justify-content:center;background:var(--wash);color:var(--garima);font:800 3rem/1 var(--display);font-stretch:75%}
.person h2{font-size:2rem;margin-bottom:.35em}
.person p{font-size:1.05rem}

/* publications */
.pubs{list-style:none;margin:0;padding:0;max-width:900px}
.pubs li{border-top:1px solid var(--rule)}
.pubs li:last-child{border-bottom:1px solid var(--rule)}
.pubs a{display:grid;grid-template-columns:1fr auto;column-gap:32px;padding:24px 0;text-decoration:none;color:var(--ink)}
.pt{font:700 1.6rem/1.15 var(--display);font-stretch:80%;color:var(--night);grid-column:1}
.pt[lang=gu]{font-family:"Anek Gujarati","Noto Sans Gujarati",var(--display);font-stretch:100%}
.pd{grid-column:1;color:var(--soft);font-size:1rem;margin-top:4px}
.pm{grid-column:2;grid-row:1/span 2;align-self:center;font-weight:700;color:var(--garima);white-space:nowrap}
.pubs a:hover .pt{color:var(--garima);text-decoration:underline;text-decoration-thickness:2px}

/* gallery */
.gallery{columns:3 300px;column-gap:10px}
.g{display:block;margin:0 0 10px;break-inside:avoid}
.g img{width:100%}

/* donate */
.donate{list-style:none;margin:24px 0 32px;padding:0}
.donate li{display:grid;grid-template-columns:1fr 260px;gap:32px;padding:20px 0;border-top:1px solid var(--rule)}
.donate li:last-child{border-bottom:1px solid var(--rule)}
.dw{font-weight:600}
.dc{font:700 1.15rem/1.3 var(--display);font-stretch:85%;color:var(--garima)}
.donate-mail{background:var(--wash);padding:18px 22px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:56px}
.contact h2{font-size:1.5rem;margin:1.4em 0 .3em}
.contact h2:first-child{margin-top:0}
.map{width:100%;height:100%;min-height:440px;border:0}
.qr{width:110px;height:auto;background:#fff;padding:6px}
.qr.big{width:170px;margin-top:20px;padding:0}

/* footer */
.foot{background:var(--night);color:#cdd5ea;padding:56px 0;font-size:1rem;margin-top:0}
.foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.6fr 1fr auto;gap:40px;align-items:start}
.foot-brand{display:flex;gap:14px;align-items:center}
.foot-brand img{width:52px;height:auto;background:#fff;padding:6px}
.foot-brand p{margin:0;font:800 1.4rem/1 var(--display);font-stretch:75%;color:#fff}

@media (max-width:980px){
  .ledger{grid-template-columns:repeat(2,1fr)}
  .ledger li,.ledger li+li{padding:18px 12px 16px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .ivs,.two,.vm,.people,.contact{grid-template-columns:1fr;gap:32px}
  .filmstrip{grid-template-columns:repeat(4,1fr)}
  .prog-grid{grid-template-columns:1fr;gap:12px}
  .prog-grid h2{position:static}
  .banner{grid-template-columns:1fr}
  .banner-photo{order:-1}
  .banner-photo img{height:260px}
  .banner-text{padding:36px 24px 40px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:1.06rem}
  .block{padding-top:56px;padding-bottom:56px}
  .big{font-size:1.18rem}
  .hero-photo img{height:52vh}
  .hero-type{margin-top:-4.2rem;padding:0}
  .hero-type h1{display:block;max-width:none;font-size:clamp(2.7rem,13vw,4rem)}
  .motto span{flex:1;text-align:center;padding:12px 6px}
  .intro{padding-top:44px}
  .strip.n3,.strip.n2{grid-template-columns:1fr 1fr}
  .strip.n3 img:first-child,.strip.n2 img:first-child{grid-column:1/-1}
  .strip img{height:200px}
  .strip.n3 img:first-child,.strip.n2 img:first-child,.strip.n1 img{height:260px}
  .timeline li{grid-template-columns:1fr;gap:10px}
  .person{grid-template-columns:96px 1fr;gap:16px}
  .face img,.initials{width:96px;height:96px}
  .initials{font-size:2rem}
  .person h2{font-size:1.6rem}
  .donate li{grid-template-columns:1fr;gap:6px}
  .pubs a{grid-template-columns:1fr}
  .pm{grid-column:1;grid-row:auto;margin-top:8px}
  .foot-grid{grid-template-columns:1fr}
  .map{min-height:300px}
}

/* bank details */
.bank-title{font-size:clamp(1.7rem,3vw,2.2rem);margin:8px 0 18px}
.bank{margin:0 0 28px;border-top:3px solid var(--night)}
.bank div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--rule)}
.bank dt{font-weight:600;color:var(--soft)}
.bank dd{margin:0;font:700 1.3rem/1.3 var(--display);font-stretch:85%;color:var(--night)}
.bank dd.acct{font-variant-numeric:tabular-nums;letter-spacing:.04em;user-select:all}
@media (max-width:640px){.bank div{grid-template-columns:1fr;gap:2px}}