/* Village Server Initiative — site stylesheet (brand system v1.0, Oct 2026)
   Colours, type and radii follow the brand guide tokens. Pages are built by site/build.mjs. */
/* Layout: Terri's "Living Water & Dawn". An off-white paper page with teal type; deep-teal gel-print bands carry the sky (satellite, mission, giving). Gold appears only where you act or on a single highlight. Light only, by design. */
:root{
  /* "Living Water & Dawn": deep teal carries the design, gold only for Give and highlights, off-white ground */
  --vsi-bg:#F0EEE9; --vsi-surface:#FFFFFF; --vsi-sheet:#F7F6F2; --vsi-ink:#0B1F2A; --vsi-ink-muted:#3C4E56; --vsi-line:#D8D3C8; --vsi-heading:#0F5C63;
  --vsi-night:#0F5C63; --vsi-night-2:#0B4A50; --vsi-on-night:#F0EEE9; --vsi-on-night-muted:#BFD8D6; --vsi-on-lamp:#0B1F2A; --vsi-on-canopy:#F0EEE9;
  --vsi-bright:#1FA5A0;
  --r-btn:4px; --r-card:8px;
  --vsi-lamp:#F2B33D; --vsi-lamp-text:#0F5C63; --vsi-canopy:#0F5C63; --vsi-laterite:#A84A28; --vsi-link:#0F6E75;
  --vsi-track:#E2DED5; --vsi-tint:#E4ECEA; color-scheme:light;
  --kandili-violet:#5E2E8C; --kandili-paper:#FFFBF2; --kandili-ink:#2A1640;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-scripture:"Newsreader",Georgia,"Times New Roman",serif;
  --f-data:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px; --gut:max(16px,env(safe-area-inset-left,0px)); --gutr:max(16px,env(safe-area-inset-right,0px));
  --s1:clamp(2.6rem,6.2vw,5.4rem); --s2:clamp(1.9rem,3.6vw,3rem); --s3:clamp(1.3rem,2vw,1.6rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--vsi-bg);color:var(--vsi-ink);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--vsi-night)}
a{color:var(--vsi-link)}
img,video{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--vsi-lamp);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gut);padding-right:var(--gutr)}
.band{padding-block:clamp(48px,7vw,88px)}
.night{background:var(--vsi-night);color:var(--vsi-on-night)}
.tint{background:var(--vsi-tint)}
.display{font-family:var(--f-display);font-stretch:118%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.h1{font-size:var(--s1)}
.h2{font-size:var(--s2)}
.h3{font-family:var(--f-display);font-stretch:108%;font-weight:700;font-size:var(--s3);line-height:1.15}
.eyebrow{font-family:var(--f-data);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vsi-lamp-text)}
.night .eyebrow{color:var(--vsi-lamp)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:var(--vsi-ink-muted);max-width:62ch}
.night .lede{color:var(--vsi-on-night-muted)}
.mono{font-family:var(--f-data);font-weight:500;font-size:.8rem;letter-spacing:.04em}
.muted{color:var(--vsi-ink-muted)}
.stack{display:grid;gap:18px}
.sec-head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(32px,4vw,56px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .98rem/1 var(--f-body);padding:15px 22px;border-radius:var(--r-btn);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lamp{background:var(--vsi-lamp);color:var(--vsi-on-lamp)}
.btn-lamp:hover{filter:brightness(1.07)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-canopy{background:var(--vsi-canopy);color:var(--vsi-on-canopy)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--vsi-night);color:var(--vsi-on-night);border-bottom:1px solid rgba(255,255,255,.08)}
header.site .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-right:auto;min-width:0}
.brand svg{flex:none}
.wordmark{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:.86rem;letter-spacing:.06em;line-height:1.05;text-transform:uppercase}
.wordmark small{display:block;font-family:var(--f-data);font-weight:500;font-stretch:100%;font-size:.62rem;letter-spacing:.14em;color:var(--vsi-on-night-muted);margin-top:3px}
nav.main{display:flex;gap:4px}
nav.main a{color:var(--vsi-on-night);text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 14px;border-radius:999px}
nav.main a:hover{background:rgba(255,255,255,.08)}
nav.main a[aria-current="page"]{background:rgba(255,255,255,.12)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:inherit;border-radius:999px;padding:9px 14px;font:600 .9rem var(--f-body)}
@media (max-width:900px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--vsi-night);flex-direction:column;padding:8px var(--gutr) 16px var(--gut);border-bottom:1px solid rgba(255,255,255,.1)}
  nav.main.open{display:flex}
  .menu-btn{display:inline-block}
  header.site .btn{padding:11px 16px}
}
@media (max-width:420px){.wordmark small{display:none} .wordmark{font-size:.74rem;letter-spacing:.03em} header.site .wrap{gap:10px}}

/* HERO: paper headline above, torn seam, teal gel print below; the matted video straddles the seam.
   Textures live in img/vsi/print/ (regenerate with site/tools/*.py). */
.hero{position:relative}
.hero-top{padding:clamp(40px,5vw,72px) var(--gutr) clamp(36px,4.2vw,56px) var(--gut)}
.hero-top .wrap{padding:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.hero h1{font-size:clamp(2.2rem,4.5vw,4.2rem);color:var(--vsi-heading)}
.hero h1 .hl{position:relative;white-space:nowrap;color:var(--vsi-ink)}
.hero h1 .hl svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.32em;overflow:visible}
.hero-side{display:grid;gap:22px;padding-bottom:6px}
.mission{display:grid;gap:6px;padding:4px 0 4px 18px;border-left:3px solid var(--vsi-bright);color:var(--vsi-ink);font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.5;max-width:52ch}
.mission span{font-family:var(--f-data);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vsi-heading)}
.hero-stage{position:relative;padding:0 var(--gutr) 0 var(--gut)}
.hero-stage::before{content:"";position:absolute;inset:38% 0 0 0;background:var(--vsi-night) url(../img/vsi/print/teal.webp) center/cover}
.hero-stage .seam{position:absolute;left:0;right:0;top:calc(38% - 46px);height:90px;background:url(../img/vsi/print/seam.png) center top/100% 100% no-repeat;pointer-events:none}
.plate{position:relative;max-width:860px;margin:0 auto;transform:rotate(-.6deg)}
.mat{position:relative;padding:clamp(8px,1.1vw,14px);background:var(--vsi-sheet);border-radius:clamp(10px,1.4vw,16px);outline:1.5px solid var(--vsi-heading);outline-offset:clamp(6px,.9vw,10px);box-shadow:0 1px 2px rgba(11,31,42,.10),0 30px 60px -28px rgba(11,31,42,.5)}
.screen{position:relative;aspect-ratio:16/9;border-radius:clamp(5px,.8vw,8px);overflow:hidden;background:var(--vsi-ink);cursor:pointer}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{--d:clamp(68px,8vw,96px);position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border:0;border-radius:50%;background:var(--vsi-lamp);color:var(--vsi-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 clamp(8px,1vw,12px) rgba(247,246,242,.45),0 10px 30px rgba(11,31,42,.35);transition:transform .2s,opacity .25s}
.play:hover{transform:scale(1.06)}
.play svg{width:38%;height:38%}
.play .i-pause{display:none}
.screen.is-playing .play .i-play{display:none}.screen.is-playing .play .i-pause{display:block}
.screen.is-playing .play{opacity:0}
.screen.is-playing:hover .play,.screen.is-playing .play:focus-visible{opacity:1}
.watch{position:absolute;left:50%;top:calc(50% + clamp(52px,6vw,72px));transform:translateX(-50%);font-family:var(--f-data);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vsi-ink);background:var(--vsi-sheet);padding:7px 10px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .25s}
.screen.is-playing .watch{opacity:0}
.mat .label{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-data);font-size:clamp(.62rem,1vw,.74rem);letter-spacing:.12em;text-transform:uppercase;color:var(--vsi-heading);padding:clamp(12px,1.6vw,18px) 4px clamp(4px,.6vw,8px)}
.mat .label span:last-child{color:var(--vsi-ink-muted)}
.hero-foot{background:var(--vsi-night) url(../img/vsi/print/teal.webp) center bottom/cover;color:var(--vsi-on-night);padding:clamp(36px,4vw,56px) var(--gutr) clamp(48px,5vw,72px) var(--gut)}
.hero-foot .wrap{padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;font-family:var(--f-data);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vsi-on-night-muted)}
.hero-foot b{color:var(--vsi-on-night);font-weight:500}
.hero-foot .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--vsi-bright);margin-right:10px;vertical-align:1px}
@media (prefers-reduced-motion:no-preference){
  .plate{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes settle{from{transform:translateY(18px) rotate(-1.6deg)}to{transform:rotate(-.6deg)}}
  .hero h1 .hl svg path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1s .35s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}
@media (max-width:980px){.hero-top .wrap{grid-template-columns:1fr}}
@media (max-width:640px){
  .hero-stage::before{inset:45% 0 0 0}.hero-stage .seam{top:calc(45% - 30px);height:60px}
  .plate{transform:none;animation:none}
  .mat .label span:last-child{display:none}
  .hero h1 .hl{white-space:normal}
}
.announce{display:inline-flex;gap:10px;align-items:center;width:fit-content;max-width:100%;background:var(--vsi-sheet);border:1px solid var(--vsi-line);color:var(--vsi-heading);text-decoration:none;padding:5px 14px 5px 5px;border-radius:999px;font-size:.88rem;font-weight:600}
.announce .pill{background:var(--vsi-heading);color:var(--vsi-on-night);font-family:var(--f-data);font-weight:500;font-size:.68rem;letter-spacing:.1em;padding:4px 9px;border-radius:999px;text-transform:uppercase}

/* 42 band */
.reach{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.big42{font-family:var(--f-display);font-weight:800;font-stretch:125%;font-size:clamp(5rem,12vw,10rem);line-height:.8;letter-spacing:-.03em;color:var(--vsi-lamp)}
.reach-copy{display:grid;gap:22px}
.reach-copy .h2{max-width:20ch}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(246,244,238,.14);border:1px solid rgba(246,244,238,.14);border-radius:14px;overflow:hidden;margin-top:8px}
.reasons div{background:var(--vsi-night);padding:18px 18px 20px;display:grid;gap:6px;align-content:start}
.reasons b{font-family:var(--f-display);font-stretch:110%;font-size:1.02rem;letter-spacing:.01em}
.reasons span{color:var(--vsi-on-night-muted);font-size:.92rem;line-height:1.45}
@media (max-width:1000px){.reach{grid-template-columns:1fr}}
@media (max-width:640px){.reasons{grid-template-columns:1fr}}

/* Signal path */
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.path::before{content:"";position:absolute;left:4%;right:4%;top:31px;border-top:2px dashed var(--vsi-line);z-index:0}
.step{position:relative;z-index:1;display:grid;gap:12px;align-content:start}
.step .node{width:64px;height:64px;border-radius:50%;background:var(--vsi-surface);border:2px solid var(--vsi-ink);display:grid;place-items:center;color:var(--vsi-ink)}
.step:last-child .node{background:var(--vsi-lamp);border-color:var(--vsi-lamp);color:#0B1F2A}
.step .n{font-family:var(--f-data);font-size:.75rem;color:var(--vsi-ink-muted);letter-spacing:.1em}
.step p{color:var(--vsi-ink-muted);font-size:.98rem}
.spec{font-family:var(--f-data);font-weight:500;font-size:.72rem;letter-spacing:.03em;color:var(--vsi-canopy);border-top:1px solid var(--vsi-line);padding-top:10px;line-height:1.6}
@media (max-width:900px){.path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.path::before{display:none}}
@media (max-width:520px){.path{grid-template-columns:1fr}}

/* field proof mosaic */
.proof{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(120px,14vw,190px);gap:12px}
.ph{position:relative;border-radius:var(--r-card);overflow:hidden;margin:0;background:var(--vsi-track)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;left:10px;bottom:10px;right:10px;font-family:var(--f-data);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.p-a{grid-column:span 7;grid-row:span 2}.p-b{grid-column:span 5}.p-c{grid-column:span 5}
.p-d{grid-column:span 4}.p-e{grid-column:span 4}.p-f{grid-column:span 4}
@media (max-width:700px){.proof{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}.p-a{grid-column:span 2;grid-row:span 2}.p-b,.p-c,.p-d,.p-e,.p-f{grid-column:span 1}}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid var(--vsi-line)}
.fact{padding:22px 20px 0 0;display:grid;gap:4px}
.fact b{font-family:var(--f-display);font-stretch:118%;font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.fact span{color:var(--vsi-ink-muted);font-size:.92rem;line-height:1.4}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}}

/* campaigns */
.camps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.camp{background:var(--vsi-surface);border:1px solid var(--vsi-line);border-radius:var(--r-card);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.camp .ph{border-radius:0;aspect-ratio:16/10;max-width:100%}
.camp-body{padding:22px;display:grid;gap:14px;align-content:start}
.camp-tag{font-family:var(--f-data);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vsi-canopy)}
.camp p{color:var(--vsi-ink-muted);font-size:.96rem}
.bar{height:8px;border-radius:99px;background:var(--vsi-track);overflow:hidden}
.bar i{display:block;height:100%;background:var(--vsi-bright);border-radius:99px}
.camp-nums{display:flex;justify-content:space-between;font-size:.88rem;font-variant-numeric:tabular-nums;gap:8px;flex-wrap:wrap}
.camp-nums b{font-size:1.05rem}
.camp .btn{justify-self:start;margin-top:4px}
.sample{display:inline-block;font-family:var(--f-data);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--vsi-ink-muted);color:var(--vsi-ink-muted);padding:2px 7px;border-radius:6px;vertical-align:middle}
@media (max-width:900px){.camps{grid-template-columns:1fr}}

/* BibleTransfer123 (only place violet lives) */
.bt{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;background:var(--kandili-violet);color:#fff;border-radius:var(--r-card);padding:clamp(22px,4vw,40px);position:relative;overflow:hidden}
.bt::before{content:"";position:absolute;width:420px;height:420px;left:-120px;top:50%;transform:translateY(-50%);background:radial-gradient(circle,rgba(242,182,50,.45),rgba(242,182,50,0) 65%)}
.bt .kandili{width:120px;aspect-ratio:1;border-radius:50%;background:var(--kandili-paper);overflow:hidden;position:relative;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.bt .kandili img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.bt .eyebrow{color:#F6D27A}
.bt p{color:#E4D9F1;max-width:56ch}
.bt .btn-lamp{white-space:nowrap}
@media (max-width:820px){.bt{grid-template-columns:1fr;text-align:left}.bt .kandili{width:110px}}

/* partners */
.partners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--vsi-line);border-left:1px solid var(--vsi-line)}
.partner{border-right:1px solid var(--vsi-line);border-bottom:1px solid var(--vsi-line);padding:20px 18px;display:grid;gap:6px;align-content:start;min-height:118px}
.partner b{font-family:var(--f-display);font-stretch:105%;font-weight:700;font-size:1.02rem;line-height:1.2}
.partner span{color:var(--vsi-ink-muted);font-size:.85rem;line-height:1.4}
@media (max-width:900px){.partners{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* scripture */
.scripture{text-align:center;display:grid;gap:22px;justify-items:center}
.scripture blockquote{margin:0;font-family:var(--f-scripture);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.25;max-width:30ch}
.scripture cite{font-family:var(--f-data);font-style:normal;font-size:.8rem;letter-spacing:.12em;color:var(--vsi-lamp)}

/* newsletter signup */
.brief{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px}
.count div{background:rgba(246,244,238,.06);border:1px solid rgba(246,244,238,.14);border-radius:12px;padding:14px 8px;text-align:center}
.count b{display:block;font-family:var(--f-display);font-stretch:118%;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums}
.count span{font-family:var(--f-data);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vsi-on-night-muted)}
.signup{background:var(--vsi-surface);color:var(--vsi-ink);border-radius:var(--r-card);padding:clamp(22px,3vw,32px);display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.88rem}
.field input,.field select{font:inherit;font-size:1rem;padding:13px 14px;border-radius:10px;border:1px solid var(--vsi-line);background:var(--vsi-bg);color:var(--vsi-ink);width:100%}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--vsi-line);border-radius:999px;padding:7px 12px;font-size:.88rem;cursor:pointer}
.chk input{accent-color:var(--vsi-canopy)}
.note-ok{font-size:.9rem;color:var(--vsi-canopy);font-weight:600}
@media (max-width:900px){.brief{grid-template-columns:1fr}}

/* footer */
footer.site{background:var(--vsi-night);color:var(--vsi-on-night-muted);font-size:.92rem}
footer.site .wrap{padding-block:64px 36px;display:grid;gap:40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{font-family:var(--f-data);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vsi-on-night);margin-bottom:12px}
.foot-grid a{color:var(--vsi-on-night-muted);text-decoration:none;display:block;padding:3px 0}
.foot-grid a:hover{color:var(--vsi-on-night)}
.legal{border-top:1px solid rgba(246,244,238,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}
.seal{display:inline-flex;gap:10px;align-items:center;border:1px solid rgba(246,244,238,.2);border-radius:12px;padding:10px 14px;color:var(--vsi-on-night)}
@media (max-width:800px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}

/* page hero (inner pages) */
.phero{background:var(--vsi-night);color:var(--vsi-on-night);position:relative;overflow:hidden;isolation:isolate}
.phero .wrap{padding-block:clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.phero .ptext{display:grid;gap:22px;align-content:center}
.phero .pimg{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;max-width:100%;position:relative}
.phero .pimg img{width:100%;height:100%;object-fit:cover}
.phero .pimg figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--f-data);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.phero h1{max-width:16ch}
.phero .lede{color:var(--vsi-on-night-muted)}
.phero .eyebrow{color:var(--vsi-lamp)}
@media (max-width:860px){.phero .wrap{grid-template-columns:1fr}}

/* about */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.split .prose{display:grid;gap:18px;max-width:62ch}
.split .prose p{color:var(--vsi-ink-muted)}
.split .prose p:first-child{color:var(--vsi-ink);font-size:1.18rem}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.coasts{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--vsi-surface);border:1px solid var(--vsi-line);border-radius:var(--r-card);padding:24px}
.coast{display:grid;gap:4px}
.coast b{font-family:var(--f-display);font-stretch:112%;font-size:1.1rem}
.coast span{font-size:.88rem;color:var(--vsi-ink-muted)}
.coasts .link{font-family:var(--f-data);font-size:.72rem;text-align:center;color:var(--vsi-lamp-text);letter-spacing:.06em}
.timeline{display:grid;gap:0;border-left:2px solid var(--vsi-line);margin-left:8px}
.tl{position:relative;padding:0 0 30px 28px;display:grid;gap:6px}
.tl::before{content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--vsi-bg);border:3px solid var(--vsi-ink)}
.tl.now::before{background:var(--vsi-lamp);border-color:var(--vsi-lamp)}
.tl .when{font-family:var(--f-data);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vsi-canopy)}
.tl p{color:var(--vsi-ink-muted);max-width:60ch}
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.person{display:grid;gap:10px;align-content:start}
.avatar{aspect-ratio:1;max-width:100%;border-radius:var(--r-card);background:var(--vsi-night-2);color:var(--vsi-on-night);display:grid;place-items:center;font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:2rem;position:relative;overflow:hidden}
.avatar::after{content:"photo";position:absolute;bottom:8px;right:10px;font-family:var(--f-data);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;opacity:.5;font-stretch:100%;font-weight:500}
.person b{font-size:1.02rem}
.person span{font-size:.88rem;color:var(--vsi-ink-muted);line-height:1.4}
@media (max-width:860px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trust div{border-top:3px solid var(--vsi-canopy);padding-top:16px;display:grid;gap:8px}
.trust p{color:var(--vsi-ink-muted);font-size:.96rem}
@media (max-width:800px){.trust{grid-template-columns:1fr}}

/* our work */
.prog{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,6vw,88px);border-bottom:1px solid var(--vsi-line)}
.prog:last-child{border-bottom:0}
.prog.flip .prog-media{order:2}
.prog-media{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.prog-media .ph{aspect-ratio:4/3}
.prog-media .ph.wide{grid-column:1/-1;aspect-ratio:16/9}
.prog-copy{display:grid;gap:16px;align-content:start}
.prog-copy>p{color:var(--vsi-ink-muted)}
.specs{background:var(--vsi-surface);border:1px solid var(--vsi-line);border-radius:var(--r-card);overflow:hidden}
.specs header{font-family:var(--f-data);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;background:var(--vsi-night);color:var(--vsi-on-night);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.specs ul{list-style:none;margin:0;padding:6px 16px 12px}
.specs li{display:grid;grid-template-columns:18px 1fr;gap:8px;padding:7px 0;border-bottom:1px dashed var(--vsi-line);font-size:.93rem}
.specs li:last-child{border-bottom:0}
.specs li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vsi-bright);margin-top:8px}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-data);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--vsi-canopy);color:var(--vsi-canopy);width:fit-content}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.dev{border-color:var(--vsi-lamp-text);color:var(--vsi-lamp-text)}
.kandili-mini{display:flex;gap:14px;align-items:center;background:var(--kandili-paper);color:var(--kandili-ink);border-radius:14px;padding:12px 16px 12px 12px;text-decoration:none;border:2px solid var(--kandili-violet);width:fit-content;max-width:100%}
.kandili-mini img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none}
.kandili-mini b{display:block;color:var(--kandili-violet)}
.kandili-mini span{font-size:.88rem}
@media (max-width:860px){.prog{grid-template-columns:1fr}.prog.flip .prog-media{order:0}}
.subnav{display:flex;gap:8px;flex-wrap:wrap}
.subnav a{font-family:var(--f-data);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vsi-on-night);text-decoration:none;border:1px solid rgba(246,244,238,.3);padding:8px 12px;border-radius:999px}
.subnav a:hover{background:rgba(246,244,238,.1)}

/* give */
.give-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.donate{background:var(--vsi-surface);border:1px solid var(--vsi-line);border-radius:var(--r-card);padding:clamp(20px,3vw,32px);display:grid;gap:20px;box-shadow:0 30px 60px -40px rgba(11,31,42,.45)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--vsi-track);border-radius:999px;padding:4px}
.seg button{font:700 .95rem var(--f-body);border:0;background:transparent;color:var(--vsi-ink);padding:11px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--vsi-surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.amts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.amts button{font:700 1.15rem var(--f-body);font-variant-numeric:tabular-nums;padding:16px 4px;border-radius:12px;border:1.5px solid var(--vsi-line);background:var(--vsi-bg);color:var(--vsi-ink);cursor:pointer}
.amts button[aria-pressed="true"]{border-color:var(--vsi-ink);background:var(--vsi-ink);color:var(--vsi-bg)}
@media (max-width:420px){.amts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.funds{display:grid;gap:8px}
.fund{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;border:1.5px solid var(--vsi-line);border-radius:12px;padding:12px 14px;cursor:pointer}
.fund:has(input:checked){border-color:var(--vsi-canopy);background:color-mix(in srgb,var(--vsi-canopy) 8%,transparent)}
.fund input{accent-color:var(--vsi-canopy);margin-top:4px}
.fund b{display:block;font-size:.98rem}
.fund span{font-size:.85rem;color:var(--vsi-ink-muted)}
.donate .btn-lamp{justify-content:center;width:100%;font-size:1.05rem;padding:18px}
.give-tag{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.78rem;border:1px dashed var(--vsi-ink-muted);border-radius:var(--r-btn);padding:6px 10px}
.zhead{display:grid;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--vsi-line)}
.zhead b{font-family:var(--f-display);font-stretch:108%;font-size:1.2rem}
.fine{font-size:.82rem;color:var(--vsi-ink-muted);display:flex;gap:8px;align-items:flex-start}
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.way{background:var(--vsi-surface);border:1px solid var(--vsi-line);border-radius:var(--r-card);padding:20px;display:grid;gap:8px;align-content:start}
.way p{color:var(--vsi-ink-muted);font-size:.94rem}
@media (max-width:900px){.give-grid{grid-template-columns:1fr}}
@media (max-width:560px){.ways{grid-template-columns:1fr}}
.camp-feature{display:grid;grid-template-columns:1fr;background:var(--vsi-surface);border:1px solid var(--vsi-line);border-radius:var(--r-card);overflow:hidden}
.camp-feature .ph{border-radius:0;aspect-ratio:16/8;max-width:100%}
.camp-feature .camp-body{padding:clamp(22px,3.5vw,40px);gap:16px}


/* involved */
.ways4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.way4{border:1px solid var(--vsi-line);border-radius:var(--r-card);padding:24px;display:grid;gap:12px;align-content:start;background:var(--vsi-surface)}
.way4 .ic{width:48px;height:48px;border-radius:12px;background:var(--vsi-night);color:var(--vsi-lamp);display:grid;place-items:center}
.way4 p{color:var(--vsi-ink-muted);font-size:.96rem}
.way4 a.more{font-weight:700;text-decoration:none;color:var(--vsi-link)}
@media (max-width:900px){.ways4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ways4{grid-template-columns:1fr}}
.prayer{display:grid;gap:0;counter-reset:p}
.prayer li{list-style:none;padding:16px 0;border-bottom:1px solid rgba(246,244,238,.14);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.prayer li::before{counter-increment:p;content:counter(p,decimal-leading-zero);font-family:var(--f-data);color:var(--vsi-lamp);font-size:.8rem}
.prayer ul{padding:0;margin:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Additions for the multi-page build ─────────────── */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--vsi-lamp);color:#0B1F2A;padding:10px 16px;border-radius:var(--r-btn);font-weight:700}
.skip-link:focus{top:12px}
.notice-bar{background:var(--vsi-lamp);color:#0B1F2A;font:600 .86rem/1.35 var(--f-body);text-align:center;padding:9px var(--gutr) 9px var(--gut)}
.notice-bar a{color:inherit;font-weight:800}
.notice-bar b{font-family:var(--f-data);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
[hidden]{display:none!important}
nav.main a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--vsi-lamp)}
@media (max-width:1060px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--vsi-night);flex-direction:column;padding:8px var(--gutr) 16px var(--gut);border-bottom:1px solid rgba(255,255,255,.1)}
  nav.main.open{display:flex}
  nav.main a{border-radius:var(--r-btn);padding:14px}
  .menu-btn{display:inline-block}
}
.hero-toggle{position:absolute;right:var(--gutr);top:16px;z-index:2;background:rgba(6,38,44,.55);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 12px;font:600 .78rem var(--f-body);cursor:pointer}
.band-tight{padding-block:clamp(32px,4vw,56px)}
.night-2{background:var(--vsi-night-2);color:var(--vsi-on-night)}
.night-2 .eyebrow{color:var(--vsi-lamp)}
.night-2 .lede{color:var(--vsi-on-night-muted)}
.camp-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-data);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--vsi-laterite);color:var(--vsi-laterite);width:fit-content}
.camp-status.live{border-color:var(--vsi-canopy);color:var(--vsi-canopy)}
.camp-status.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.camp-goal{font-size:.88rem;color:var(--vsi-ink-muted);font-family:var(--f-data)}
.gallery{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(120px,13vw,180px);gap:12px}
.gallery figure{grid-column:span 4;grid-row:span 2}
.gallery figure.wide{grid-column:span 8}
.gallery figure.tall{grid-row:span 3}
.gallery video{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}.gallery figure,.gallery figure.tall{grid-column:span 1;grid-row:span 1}.gallery figure.wide{grid-column:span 2;grid-row:span 2}}
.form-status{font-size:.9rem;font-weight:600;min-height:1.3em;margin:0}
.form-status.ok{color:var(--vsi-canopy)}
.form-status.err{color:var(--vsi-laterite)}
.field textarea{font:inherit;font-size:1rem;padding:13px 14px;border-radius:10px;border:1px solid var(--vsi-line);background:var(--vsi-bg);color:var(--vsi-ink);width:100%;min-height:110px;resize:vertical}
.zeffy-frame{display:block;width:100%;min-height:760px;border:0;border-radius:var(--r-card);background:var(--vsi-surface)}
.zeffy-out{margin:8px 0 0;font-size:.85rem;text-align:center}
.pending{background:color-mix(in srgb,var(--vsi-lamp) 14%,var(--vsi-surface));border:1px dashed var(--vsi-lamp-text);border-radius:var(--r-btn);padding:12px 14px;font-size:.9rem}
.donate .btn-lamp[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.media-note{font-family:var(--f-data);font-size:.72rem;color:var(--vsi-ink-muted);letter-spacing:.04em}
.prose-block{max-width:68ch;display:grid;gap:16px}
.prose-block p{color:var(--vsi-ink-muted)}
.video-feature{border-radius:var(--r-card);overflow:hidden;background:#000;aspect-ratio:16/9}
.video-feature video{width:100%;height:100%;object-fit:cover}
/* Entrance motion only ever adds polish: content is fully visible without it. */
@media (prefers-reduced-motion:no-preference){.reveal.is-visible{animation:vsi-rise .6s ease both}}
@keyframes vsi-rise{from{transform:translateY(14px)}to{transform:none}}
.chk{white-space:nowrap}
.phero h1{font-size:clamp(2.3rem,5.2vw,4.3rem);overflow-wrap:break-word;hyphens:manual}

/* ── Terri's colorway across every page ───────────────────────────────
   Paper ground and header, teal type, deep-teal notice bar, ink footer.
   Gold stays on buttons and single highlights only. */
body{background:var(--vsi-bg) url(../img/vsi/print/paper.webp)}
body::before{background:var(--vsi-bg)}
.display{color:var(--vsi-heading)}
.night .display,.night-2 .display,.camps-band .display,.on-teal .display{color:var(--vsi-on-night)}
.eyebrow{color:var(--vsi-heading);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.night .eyebrow,.night-2 .eyebrow,.phero.night .eyebrow{color:var(--vsi-bright)}
.btn-line{border-color:var(--vsi-heading);color:var(--vsi-heading);background:transparent}
.btn-line:hover{background:var(--vsi-heading);color:var(--vsi-on-night)}
.night .btn-line,.night-2 .btn-line,.camps-band .btn-line{border-color:var(--vsi-on-night);color:var(--vsi-on-night)}
.btn-ghost{border-color:var(--vsi-heading);color:var(--vsi-heading)}
.night .btn-ghost,.night-2 .btn-ghost,.camps-band .btn-ghost{border-color:var(--vsi-on-night);color:var(--vsi-on-night)}
.btn-lamp{box-shadow:0 2px 0 #C98F1F}
.btn-lamp:hover{filter:none;box-shadow:0 4px 0 #C98F1F}

.notice-bar{background:var(--vsi-night-2);color:var(--vsi-on-night);font-weight:500}
.notice-bar b{color:var(--vsi-on-night-muted)}
.notice-bar a{color:var(--vsi-lamp);font-weight:700;text-decoration:none;margin-left:4px}
header.site{background:var(--vsi-bg);color:var(--vsi-ink);border-bottom:1px solid var(--vsi-line)}
header.site .brand{color:var(--vsi-heading)}
.wordmark small{color:var(--vsi-ink-muted)}
nav.main a{color:var(--vsi-ink)}
nav.main a:hover{background:none;color:var(--vsi-heading);text-decoration:underline;text-decoration-color:var(--vsi-bright);text-decoration-thickness:2px;text-underline-offset:6px}
nav.main a[aria-current="page"]{background:none;box-shadow:none;color:var(--vsi-heading);text-decoration:underline;text-decoration-color:var(--vsi-lamp);text-decoration-thickness:2px;text-underline-offset:6px}
.menu-btn{border-color:var(--vsi-heading);color:var(--vsi-heading)}
@media (max-width:1060px){nav.main{background:var(--vsi-bg);border-bottom:1px solid var(--vsi-line)}}

/* bands */
.night{background:var(--vsi-night) url(../img/vsi/print/teal.webp) center/cover}
.night-2{background:var(--vsi-night-2)}
.reasons{background:rgba(240,238,233,.18);border-color:rgba(240,238,233,.18)}
.reasons div{background:var(--vsi-night-2)}
.night .reasons div{background:rgba(11,74,80,.92)}
.big42{color:var(--vsi-on-night)}
.step .node{background:var(--vsi-heading);border-color:var(--vsi-heading);color:var(--vsi-bg);box-shadow:0 0 0 6px var(--vsi-bg)}
.step:last-child .node{background:var(--vsi-heading);border-color:var(--vsi-heading);color:var(--vsi-bg)}
.path::before{border-top-color:var(--vsi-bright);opacity:.7}
.step .n{color:var(--vsi-heading)}
.spec{color:var(--vsi-heading)}
.fact b{color:var(--vsi-heading)}
.facts{border-top:2px solid var(--vsi-heading)}
.ph figcaption,.phero .pimg figcaption{left:10px;right:auto;bottom:10px;background:var(--vsi-bg);color:var(--vsi-heading);text-shadow:none;padding:4px 8px;border-radius:2px}
.camps-band{background:var(--vsi-night) url(../img/vsi/print/teal.webp) center/cover;color:var(--vsi-on-night)}
.camps-band .eyebrow{color:var(--vsi-lamp)}
.camps-band .lede{color:var(--vsi-on-night-muted)}
.camp{background:var(--vsi-sheet);border-color:var(--vsi-line);color:var(--vsi-ink)}
.camp .h3,.camp h3{color:var(--vsi-heading)}
.camp-tag{color:var(--vsi-heading)}
.camp-status{border-color:var(--vsi-ink-muted);color:var(--vsi-ink-muted)}
.bar{background:var(--vsi-tint)}
.give-note{margin-top:28px;font-size:.88rem;color:var(--vsi-on-night-muted);display:flex;align-items:center;gap:10px}

/* scripture on paper, teal verse, one gold highlight */
.scripture blockquote{color:var(--vsi-heading)}
.scripture blockquote em{font-style:italic;background:linear-gradient(transparent 62%,rgba(242,179,61,.55) 62%,rgba(242,179,61,.55) 92%,transparent 92%);padding:0 .08em}
.scripture cite{color:var(--vsi-ink-muted)}
.scripture svg{color:var(--vsi-heading)!important}
.night .scripture blockquote{color:var(--vsi-on-night)}

/* BibleTransfer123 + Eric's companion site: two quiet cards, one under the other */
.bt{background:var(--vsi-sheet);color:var(--vsi-ink);border:1px solid var(--vsi-line)}
.bt::before{display:none}
.bt .kandili{background:none;box-shadow:none;border-radius:0;width:clamp(84px,9vw,112px)}
.bt .kandili img{transform:none;object-fit:contain;mix-blend-mode:multiply}
.bt .eyebrow{color:var(--vsi-heading)}
.bt p{color:var(--vsi-ink-muted)}
.bt .h3,.bt h2{color:var(--vsi-heading)}
.companion{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,32px);align-items:center;margin-top:14px;padding:clamp(16px,2.2vw,24px) clamp(20px,3vw,36px);border:1px dashed var(--vsi-heading);border-radius:var(--r-card)}
.companion .ic{width:52px;height:52px;border-radius:50%;background:var(--vsi-tint);color:var(--vsi-heading);display:grid;place-items:center}
.companion b{display:block;font-family:var(--f-display);font-stretch:108%;font-size:1.1rem;color:var(--vsi-heading)}
.companion span{font-size:.94rem;color:var(--vsi-ink-muted)}
@media (max-width:820px){.companion{grid-template-columns:1fr}}

.partner b{color:var(--vsi-heading)}

/* inner page heroes: paper top, teal headline, matted photo */
.phero{background:transparent;color:var(--vsi-ink);border-bottom:1px solid var(--vsi-line)}
.phero h1{color:var(--vsi-heading)}
.phero .lede{color:var(--vsi-ink-muted)}
.phero .eyebrow{color:var(--vsi-heading)}
.phero .pimg{padding:clamp(8px,1vw,12px);background:var(--vsi-sheet);border-radius:clamp(10px,1.2vw,14px);outline:1.5px solid var(--vsi-heading);outline-offset:clamp(5px,.8vw,8px);box-shadow:0 24px 48px -28px rgba(11,31,42,.45);overflow:visible;aspect-ratio:auto}
.phero .pimg img{aspect-ratio:4/3;border-radius:6px}
.phero .pimg figcaption{left:22px;bottom:22px}
.subnav a{color:var(--vsi-heading);border-color:var(--vsi-line);background:var(--vsi-sheet)}
.subnav a:hover{background:var(--vsi-tint)}

/* forms on teal: paper inputs */
.signup{background:var(--vsi-sheet)}
.signup .h3{color:var(--vsi-heading)}
.chk input,.fund input{accent-color:var(--vsi-heading)}

/* other surfaces */
.way4 .ic{background:var(--vsi-tint);color:var(--vsi-heading)}
.way4 .h3{color:var(--vsi-heading)}
.way,.way4,.coasts,.specs,.donate,.camp-feature{background:var(--vsi-sheet)}
.specs header{background:var(--vsi-heading)}
.tl::before{border-color:var(--vsi-heading)}
.tl .when{color:var(--vsi-heading)}
.trust div{border-top-color:var(--vsi-heading)}
.avatar{background:var(--vsi-tint);color:var(--vsi-heading)}
.amts button[aria-pressed="true"]{border-color:var(--vsi-heading);background:var(--vsi-heading);color:var(--vsi-bg)}
.kandili-mini{background:var(--vsi-sheet);color:var(--vsi-ink);border-color:var(--vsi-heading)}
.kandili-mini b{color:var(--vsi-heading)}
.kandili-mini img{mix-blend-mode:multiply;object-fit:contain}
.prayer li{border-bottom-color:rgba(240,238,233,.18)}
.prayer li::before{color:var(--vsi-bright)}
.pending{background:var(--vsi-sheet);border-color:var(--vsi-heading)}

/* footer: ink */
footer.site{background:var(--vsi-ink);color:var(--vsi-on-night-muted)}
.foot-grid h4{color:var(--vsi-bright)}
footer.site .brand{color:var(--vsi-on-night)}
footer.site .wordmark small{color:var(--vsi-on-night-muted)}

.big42 small{display:block;font-family:var(--f-data);font-size:.78rem;font-weight:400;font-stretch:100%;letter-spacing:.14em;color:var(--vsi-on-night-muted);margin-top:22px;line-height:1.5;text-transform:uppercase;max-width:22ch}
/* visual timeline */
.road{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0}
.road li{position:relative;padding:34px 18px 0 0;display:grid;gap:6px;align-content:start;min-width:0}
.road li::before{content:"";position:absolute;top:8px;left:0;right:0;border-top:2px solid var(--vsi-heading)}
.road li:last-child::before{border-top-style:dashed;border-color:var(--vsi-bright)}
.road li::after{content:"";position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--vsi-bg);border:3px solid var(--vsi-heading)}
.road li:last-child::after{border-color:var(--vsi-lamp);background:var(--vsi-lamp)}
.road .when{font-family:var(--f-data);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vsi-heading)}
.road b{font-family:var(--f-display);font-stretch:106%;font-weight:750;font-size:1.02rem;line-height:1.2}
.road span:last-child{font-size:.88rem;color:var(--vsi-ink-muted);line-height:1.4}
@media (max-width:900px){.road{grid-template-columns:1fr;border-left:2px solid var(--vsi-heading);margin-left:8px}.road li{padding:0 0 22px 28px}.road li::before{display:none}.road li::after{left:-10px;top:2px}}
@media (max-width:640px){
  .hero-top{padding-top:32px}
  .hero-side{gap:18px}
  .mission{font-size:.98rem}
  .hero-side .btn{padding:14px 18px}
  .notice-bar .long{display:none}
}
.partner b a{color:inherit;text-decoration:none}.partner b a:hover{text-decoration:underline;text-decoration-color:var(--vsi-bright)}
/* Home mosaic: on phones the last tile takes the full row instead of leaving a gap */
@media (max-width:700px){.proof .p-f{grid-column:span 2;grid-row:span 2}}
/* Assistant launcher in the brand teal; icon-only on phones so it never covers the hero play button */
body .vsi-asst-launch,body .vsi-asst-head,body .vsi-asst-foot button,body .vsi-asst-email button{background:var(--vsi-heading)}
@media (max-width:600px){body .vsi-asst-launch{padding:14px;right:14px;bottom:14px}body .vsi-asst-launch .vsi-asst-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ── Artwork (watercolor + pen, Oct 28) ───────────────────────────
   Files in img/vsi/art/. Spots are transparent, so they sit on paper or tint. */
.step .spot{height:150px;width:auto;max-width:100%;object-fit:contain;object-position:left bottom;margin-bottom:-4px}
.path::before{top:193px}
.vg-band{margin:clamp(40px,6vw,64px) 0 0;border-radius:var(--r-card);overflow:hidden;background:#0A191F;box-shadow:0 30px 60px -32px rgba(11,31,42,.55)}
.vg{aspect-ratio:1600/430;background:#0A191F url(../img/vsi/art/village-night.webp) center 72%/100% auto no-repeat}
.vg canvas{display:block}
.vg-band .label{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-data);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vsi-lamp);padding:12px 16px;background:var(--vsi-ink)}
.vg-band .label span:last-child{color:var(--vsi-on-night-muted)}
@media (max-width:600px){.vg{aspect-ratio:1600/688;overflow:hidden;background-image:none}.vg canvas{width:160%!important;margin-left:-30%}.vg-band .label span:last-child{display:none}}
.skyline{display:block;width:100%;height:auto;max-width:1400px;margin:clamp(40px,6vw,72px) auto calc(-1*clamp(56px,8vw,96px));opacity:.9}
.scripture.sun{position:relative;isolation:isolate}
.scripture.sun::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(560px,90vw);aspect-ratio:1;transform:translate(-50%,-52%);background:url(../img/vsi/art/wash-sun.webp) center/contain no-repeat;opacity:.45}
.art-plate{max-width:1100px;margin:clamp(44px,6vw,72px) auto 0;transform:rotate(.4deg)}
.art-plate img{display:block;width:100%;height:auto;border-radius:clamp(6px,1vw,10px)}
@media (max-width:760px){.art-plate{transform:none}}
.lamp-note{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;padding:20px 24px;background:url(../img/vsi/art/wash-sky.webp) center/100% 100% no-repeat}
.lamp-note img{width:120px;height:auto}
.lamp-note p{margin:0;color:var(--vsi-ink)}
.lamp-note b{display:block;font-family:var(--f-display);color:var(--vsi-heading);font-size:1.15rem;margin-bottom:4px}
@media (max-width:480px){.lamp-note{grid-template-columns:84px 1fr;padding:16px}.lamp-note img{width:84px}}
.village-night{background:#0A191F url(../img/vsi/art/village-night-lit.webp) center bottom/cover no-repeat;position:relative}
.village-night::before{content:"";position:absolute;inset:0;background:rgba(10,25,31,.35);pointer-events:none}
.village-night>.wrap{position:relative}
.prog-spot{width:128px;height:auto;margin:-8px 0 -10px -6px}
footer.site{position:relative}
footer.site::before{content:"";display:block;height:clamp(60px,11.9vw,170px);background:url(../img/vsi/art/divider-hills.webp) center bottom/cover no-repeat,var(--vsi-bg) url(../img/vsi/print/paper.webp)}

/* partner logos: real colors on a sheet card, name kept as a caption */
.partner{gap:8px}
.partner .plogo{height:96px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:var(--vsi-sheet);border:1px solid var(--vsi-line);border-radius:10px;padding:14px 18px;margin-bottom:6px}
.partner .plogo img{max-width:100%;max-height:64px;min-width:0;width:auto;height:auto;object-fit:contain}
.partner .plogo .wordmark{display:flex;align-items:center;gap:10px;color:var(--vsi-heading);text-align:left}
.partner .plogo .wordmark i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--vsi-heading);color:var(--vsi-sheet);display:grid;place-items:center;font-family:var(--f-display);font-style:normal;font-weight:800;font-size:.8rem;letter-spacing:.04em}
.partner .plogo .wordmark em{font-family:var(--f-display);font-style:normal;font-stretch:108%;font-weight:800;font-size:.86rem;line-height:1.08;text-transform:uppercase;letter-spacing:.02em}
.partner{min-width:0}
.partner .plogo .wordmark{min-width:0}
.partner .plogo .wordmark em{overflow-wrap:anywhere}
@media (max-width:600px){
  .partner .plogo{height:84px;padding:10px}
  .partner .plogo img{max-height:56px}
  .partner .plogo .wordmark{flex-direction:column;gap:6px;text-align:center}
  .partner .plogo .wordmark i{width:32px;height:32px;font-size:.68rem}
  .partner .plogo .wordmark em{font-size:.62rem}
}

/* Official VillageServer Initiative logo (Oct 28): round mark in the header, full badge in the footer and on About */
.brand .logo-mark{width:44px;height:44px;flex:none;border-radius:50%}
.scripture .logo-mark{width:56px;height:56px;border-radius:50%}
footer.site .foot-badge img{width:140px;height:auto;display:block}
.badge-fig{margin:8px 0 0;max-width:340px}
.badge-fig img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 28px rgba(11,31,42,.18))}
@media (max-width:600px){.brand .logo-mark{width:38px;height:38px}.badge-fig{max-width:280px;margin-inline:auto}}
.stat42{display:grid;gap:18px;align-content:start}
.stat42 .breaking{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:118%;font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.1;text-transform:uppercase;color:var(--vsi-lamp);max-width:16ch}
.fact.ver b{white-space:nowrap;font-size:clamp(1.7rem,2.7vw,2.3rem)}
.road{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.7fr)}
.road li.next{background:var(--vsi-sheet);border:1.5px solid var(--vsi-lamp);border-radius:12px;padding:34px 18px 18px;margin-top:-6px}
.road li.next::before{left:-1px;right:auto;width:18px}
.road li.next::after{left:16px;top:-10px}
.road li.next .when{color:#9A6A0B;font-weight:600}
.road li.next b{font-size:1.2rem;color:var(--vsi-heading)}
@media (max-width:900px){.road{grid-template-columns:1fr}.road li.next{margin:4px 0 0 18px;padding:18px}.road li.next::after{left:-38px;top:20px}}
.stat42 .breaking span{display:block;font-size:.62em;color:var(--vsi-on-night);margin-top:6px;letter-spacing:.02em}

/* Give: general fund cards, impact promise, optional "place on your heart" panel */
.way .ic{width:40px;height:40px;border-radius:10px;background:var(--vsi-tint);color:var(--vsi-heading);display:grid;place-items:center}
.impact-note{border-left:4px solid var(--vsi-lamp);background:var(--vsi-sheet);border-radius:0 var(--r-card) var(--r-card) 0;padding:18px 22px;display:grid;gap:6px}
.impact-note p:last-child{color:var(--vsi-ink)}
details.heart{gap:16px}
details.heart summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.heart summary::-webkit-details-marker{display:none}
details.heart summary::after{content:"+";font:700 1.4rem/1 var(--f-body);color:var(--vsi-heading)}
details.heart[open] summary::after{content:"–"}
details.heart summary b{display:block}
details.heart summary small{font-size:.85rem;color:var(--vsi-ink-muted)}
details.heart .btn-ghost{justify-content:center;width:100%}
@media (max-width:900px){.give-grid>.donate-wrap{order:-1}}
@media (max-width:560px){.way:has(>.ic){grid-template-columns:40px 1fr;column-gap:14px;padding:16px}.way>.ic{grid-row:span 2}}
@media (max-width:600px){#app .h2{font-size:clamp(1.6rem,7.4vw,2.4rem)}}

/* Eric's companion site: a full card with the VSI badge, not a quiet link */
.companion{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);margin-top:20px;padding:clamp(20px,3vw,34px) clamp(22px,3.4vw,44px);border:0;background:var(--vsi-heading);color:var(--vsi-paper,#F0EEE9);text-decoration:none;box-shadow:0 14px 34px -22px rgba(11,31,42,.55);transition:transform .2s ease,box-shadow .2s ease}
.companion:hover,.companion:focus-visible{transform:translateY(-2px);box-shadow:0 20px 40px -22px rgba(11,31,42,.65)}
.companion-badge{width:clamp(84px,9vw,112px);height:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.companion .companion-copy{display:grid;gap:6px;color:inherit}
.companion .eyebrow{color:var(--vsi-lamp);font-size:.8rem;margin:0}
.companion b{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;color:#fff}
.companion .companion-copy>span:last-child{font-size:1rem;line-height:1.55;color:rgba(240,238,233,.86);max-width:60ch}
.companion .btn-lamp{white-space:nowrap;font-size:1.02rem;padding:16px 26px}
@media (max-width:820px){.companion{grid-template-columns:auto minmax(0,1fr)}.companion .btn-lamp{grid-column:1/-1;justify-content:center}}
@media (max-width:480px){.companion{grid-template-columns:1fr;text-align:left}.companion-badge{width:76px}}

/* Give: the Zeffy campaign banner above the form */
.give-banner{margin:0;border-radius:var(--r-card);overflow:hidden;box-shadow:0 14px 34px -24px rgba(11,31,42,.6)}
.give-banner img{display:block;width:100%;height:auto}
@media (max-width:900px){.give-banner{max-width:520px;justify-self:center}}

/* Hero: the official badge up top, filling the open space beside the headline */
.hero-badge{grid-area:badge;display:block;height:auto;width:clamp(120px,11vw,168px);filter:drop-shadow(0 10px 18px rgba(11,31,42,.18))}
.hero-top .wrap{grid-template-areas:"badge side" "h1 side";row-gap:clamp(14px,2vw,24px)}
.hero-top h1{grid-area:h1}
.hero-top .hero-side{grid-area:side;align-self:end}
@media (max-width:980px){
  .hero-top .wrap{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h1 badge" "side badge";column-gap:clamp(24px,4vw,48px)}
  .hero-badge{width:clamp(170px,26vw,260px);align-self:center}
}
@media (max-width:640px){
  .hero-top .wrap{grid-template-columns:1fr;grid-template-areas:"badge" "h1" "side"}
  .hero-badge{width:118px}
}

/* Header: the full official badge, not just the cross + signal crop */
.brand .logo-badge-head{width:auto;height:64px;border-radius:0;filter:drop-shadow(0 3px 6px rgba(11,31,42,.18))}
@media (max-width:600px){.brand .logo-badge-head{width:auto;height:52px}}