/* ==========================================================================
HARVEST HANDS MINISTRIES PAKISTAN
Design system v4 — "Carbon · Marigold · Jade"
Warm carbon base · electric marigold · vermilion clay · jade counterpoint.
Bricolage Grotesque (display) · Instrument Sans (body) · Instrument Serif (scripture) · Caveat (accents)
========================================================================== */
/* ---------- TOKENS — "Carbon · Marigold · Jade" ---------- */
:root{
/* warm carbon — the base */
--ink-900:#100E0C;
--ink-850:#16130F;
--ink-800:#1F1A15;
--ink-700:#2B241D;
--ink-600:#3A3126;
--ink-500:#0F5A4E; /* jade — the bar device */
--ink-400:#4A3E30;
/* marigold — the primary voice */
--wheat-200:#FFF0C4;
--wheat-300:#FFD467;
--wheat-400:#FFB800;
--wheat-500:#E09A00;
--wheat-600:#A87200;
/* vermilion clay — action */
--ember-300:#FFA877;
--ember-400:#FF7A33;
--ember-500:#E85D1F;
--ember-600:#A63C0F;
/* jade — the cool counterpoint */
--jade-300:#4FD6B4;
--jade-400:#1FA98A;
--jade-500:#0F5A4E;
--jade-600:#0A3F37;
/* bone paper */
--cream-50:#F9F5EC;
--cream-100:#F3ECDD;
--cream-200:#E9DFCB;
--cream-300:#D6C7AA;
--crimson:#B3271F;
--crimson-dk:#7E1913;
--fg:var(--cream-50);
--muted:rgba(249,245,236,.70);
--muted-2:rgba(249,245,236,.46);
--line:rgba(255,184,0,.32);
--line-soft:rgba(249,245,236,.13);
--display:'Newsreader',Georgia,'Times New Roman',serif;
--sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--serif:'Newsreader',Georgia,serif;
--script:'Caveat','Segoe Script',cursive;
--gut:clamp(1.15rem,3.2vw,2.75rem);
--sec:clamp(4rem,9vw,8.5rem);
--maxw:1360px;
--maxw-narrow:820px;
--ease:cubic-bezier(.22,1,.36,1);
--ease-io:cubic-bezier(.66,0,.34,1);
--shadow-hard:14px 14px 0 var(--ember-500);
--shadow-lift:0 30px 70px -22px rgba(0,0,0,.8);
}
/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
margin:0;background:var(--ink-900);color:var(--fg);
font-family:var(--sans);font-size:clamp(1.06rem,1rem + .32vw,1.24rem);
line-height:1.7;font-weight:400;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
::selection{background:var(--ember-400);color:#fff}
:focus-visible{outline:3px solid var(--wheat-400);outline-offset:3px}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--ink-850)}
::-webkit-scrollbar-thumb{background:var(--ember-500)}
::-webkit-scrollbar-thumb:hover{background:var(--ember-400)}
/* ---------- TYPE ---------- */
.dsp{
font-family:var(--display);font-weight:500;text-transform:none;
font-variation-settings:'opsz' 36;
line-height:1.05;letter-spacing:-.022em;text-wrap:balance;
}
.dsp em,.italic-gold{font-style:italic;font-weight:400}
.dsp strong,.dsp b{font-weight:700}
/* the few places that still earn all-caps */
.caps{text-transform:uppercase;letter-spacing:-.01em}
.d1{font-size:clamp(2.5rem,1.2rem + 5.2vw,6rem)}
.d2{font-size:clamp(2rem,1.1rem + 3.2vw,4.1rem)}
.d3{font-size:clamp(1.7rem,1.1rem + 2vw,2.9rem)}
.d4{font-size:clamp(1.4rem,1.1rem + 1.3vw,2.15rem);line-height:1.05}
.d5{font-size:clamp(1.12rem,1rem + .7vw,1.45rem);line-height:1.12}
/* the logo's own device: a solid bar behind a word */
.bar{
display:inline-block;padding:.06em .3em .12em;margin-inline:-.05em;
background:var(--ink-500);color:var(--cream-50);
}
.bar-ember{background:var(--ember-500)}
.bar-wheat{background:var(--wheat-400);color:var(--ink-900)}
.bar-crimson{background:var(--crimson)}
.bar-cream{background:var(--cream-100);color:var(--ink-900)}
.outline-txt{color:transparent;-webkit-text-stroke:2px var(--wheat-400)}
.tint{color:var(--wheat-400)}
.tint-ember{color:var(--ember-400)}
/* script accents */
.script{font-family:var(--script);font-weight:700;text-transform:none;letter-spacing:0;line-height:1}
.kicker{
display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);color:var(--accent,var(--ember-500));
margin-bottom:.5em;letter-spacing:.005em;
}
.eyebrow{
display:inline-flex;align-items:center;gap:.75rem;
font-size:.86rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
color:var(--ember-400);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--ember-400)}
.eyebrow.is-c{justify-content:center}
.eyebrow.is-c::after{content:"";width:34px;height:3px;background:var(--ember-400)}
.lead{font-size:clamp(1.1rem,1.02rem + .5vw,1.38rem);line-height:1.66;color:var(--muted);max-width:60ch;font-weight:400}
.body{color:var(--muted);max-width:66ch}
.body p+p{margin-top:1.05em}
.body strong{color:var(--cream-50);font-weight:700}
.small{font-size:.98rem;line-height:1.62}
/* ---------- LAYOUT ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gut)*2,var(--maxw-narrow));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gut)*1.1,1720px);margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.section-sm{padding-block:clamp(2.75rem,5.5vw,4.75rem);position:relative}
.section>*,.section-sm>*{position:relative;z-index:3}
.grid{display:grid;gap:var(--gut)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-7-5{grid-template-columns:7fr 5fr}
.g-5-7{grid-template-columns:5fr 7fr}
.g-6-6{grid-template-columns:1fr 1fr}
.align-c{align-items:center}
.center{text-align:center}
.center .lead,.center .body{margin-inline:auto}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}.mt-4{margin-top:3.25rem}
.hide-mob{display:initial}
.bg-ink{background:var(--ink-900)}
.bg-ink-2{background:var(--ink-850)}
.bg-slate{background:var(--ink-800)}
.bg-cream{background:var(--cream-100);color:var(--ink-900)}
.bg-cream .lead,.bg-cream .body{color:rgba(16,14,12,.72)}
.bg-cream .body strong{color:var(--ink-900)}
.bg-cream .eyebrow{color:var(--ember-500)}
.bg-cream .eyebrow::before,.bg-cream .eyebrow::after{background:var(--ember-500)}
.bg-cream .kicker{color:var(--ember-500)}
.bg-ember{background:var(--ember-500);color:#fff}
/* diagonal cut edges — bold, graphic */
.cut-t{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%)}
.cut-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2vw),0 100%)}
.cut-tb{clip-path:polygon(0 3.2vw,100% 0,100% calc(100% - 3.2vw),0 100%)}
/* oversized ghost numeral behind a section */
.ghost-no{
position:absolute;font-family:var(--display);font-size:min(26vw,300px);line-height:.7;
color:transparent;-webkit-text-stroke:1px rgba(255,184,0,.13);
pointer-events:none;user-select:none;z-index:0;
}
/* ---------- PHOTO FRAMES (aspect-ratio safe) ---------- */
/* every .ph gets its ratio from the inline --ar set per image */
.ph{position:relative;overflow:hidden;background:var(--ink-700);aspect-ratio:var(--ar,3/2)}
.ph>img{width:100%;height:100%;object-fit:cover;object-position:center}
.ph-land{--ar:3/2}
.ph-wide{--ar:16/9}
.ph-pano{--ar:12/5}
.ph-sq{--ar:1/1}
.ph-port{--ar:2/3}
/* zoom on hover, no desaturation — photos stay full-colour */
.ph-zoom>img{transition:transform 1.4s var(--ease)}
.ph-zoom:hover>img{transform:scale(1.06)}
/* thick brand edge */
.ph-edge{border:6px solid var(--cream-100)}
.ph-offset{box-shadow:var(--shadow-hard)}
/* ---------- BUTTONS ---------- */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
padding:1.05rem 2rem;
font-family:var(--sans);font-size:.88rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
background:var(--ember-500);color:#fff;border:2px solid var(--ember-500);
overflow:hidden;isolation:isolate;white-space:nowrap;
transition:color .35s var(--ease),transform .4s var(--ease),border-color .35s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wheat-400);
transform:translateY(100%);transition:transform .45s var(--ease)}
.btn:hover{color:var(--ink-900);border-color:var(--wheat-400);transform:translateY(-3px)}
.btn:hover::before{transform:translateY(0)}
.btn .ico{width:1.05em;height:1.05em;transition:transform .4s var(--ease)}
.btn:hover .ico{transform:translateX(5px)}
.btn-lg{padding:1.35rem 2.7rem;font-size:.98rem}
.btn-sm{padding:.78rem 1.35rem;font-size:.8rem}
.btn-block{width:100%}
.btn-ghost{background:transparent;border-color:var(--cream-50);color:var(--cream-50)}
.btn-ghost::before{background:var(--cream-50)}
.btn-ghost:hover{border-color:var(--cream-50);color:var(--ink-900)}
.btn-wheat{background:var(--wheat-400);border-color:var(--wheat-400);color:var(--ink-900)}
.btn-wheat::before{background:var(--ember-400)}
.btn-wheat:hover{color:#fff;border-color:var(--ember-400)}
.btn-crimson{background:var(--crimson);border-color:var(--crimson)}
.btn-crimson::before{background:var(--ember-400)}
.btn-crimson:hover{color:#fff;border-color:var(--ember-400)}
.btn-ink{background:var(--ink-800);border-color:var(--ink-800);color:var(--cream-50)}
.btn-ink::before{background:var(--wheat-400)}
.btn-ink:hover{color:var(--ink-900);border-color:var(--wheat-400)}
.link{
display:inline-flex;align-items:center;gap:.55rem;position:relative;padding-block:.3rem;
font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--wheat-400);
}
.link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--wheat-400);
transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.bg-cream .link{color:var(--ember-500)}
.bg-cream .link::after{background:var(--ember-500)}
/* ---------- WHEAT DIVIDER ---------- */
.wheat-rule{display:flex;align-items:center;gap:1.1rem;color:var(--wheat-400)}
.wheat-rule::before,.wheat-rule::after{content:"";height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.wheat-rule svg{width:26px;height:34px;flex:none}
/* ---------- HEADER ---------- */
.topbar{background:var(--ink-850);border-bottom:1px solid var(--line-soft);font-size:.88rem;color:var(--muted-2);position:relative;z-index:60}
.topbar .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap}
.topbar a:hover{color:var(--wheat-400)}
.topbar .v{font-family:var(--script);font-size:1.5rem;color:var(--wheat-300);font-weight:700}
.topbar .meta{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.reg-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--ember-500);color:#fff;
padding:.25rem .7rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.header{position:sticky;top:0;z-index:100;background:rgba(16,14,12,.82);
backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease)}
.header.is-stuck{background:rgba(16,14,12,.97);border-bottom-color:var(--line-soft)}
.header .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:80px}
.header.is-stuck .wrap-wide{min-height:66px}
.brand img{height:48px;width:auto;transition:height .4s var(--ease)}
.header.is-stuck .brand img{height:40px}
.nav{display:flex;align-items:center;gap:.15rem}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem .8rem;
font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
position:relative;transition:color .3s var(--ease)}
.nav>li>a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;
background:var(--ember-400);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav>li>a:hover,.nav>li.is-active>a,.nav>li>button:hover{color:var(--cream-50)}
.nav>li>a:hover::after,.nav>li.is-active>a::after{transform:scaleX(1);transform-origin:left}
.nav .caret{width:.6em;transition:transform .3s var(--ease)}
.has-mega:hover .caret{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink-850);
border-top:3px solid var(--ember-500);box-shadow:var(--shadow-lift);
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s;padding-block:2.25rem 2.5rem}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr) .85fr;gap:1rem 2rem}
.mega-item{display:flex;gap:.8rem;align-items:flex-start;padding:.65rem .7rem;transition:background .3s var(--ease),transform .3s var(--ease)}
.mega-item:hover{background:rgba(255,122,51,.12);transform:translateX(4px)}
.mega-item .n{font-family:var(--display);font-size:1.1rem;color:var(--ember-400);padding-top:.1rem}
.mega-item b{display:block;font-size:1rem;font-weight:700;color:var(--cream-50)}
.mega-item span{display:block;font-size:.86rem;color:var(--muted-2);line-height:1.5}
.mega-feature{border-left:1px solid var(--line-soft);padding-left:1.75rem}
.burger{display:none;width:46px;height:46px;position:relative;flex:none;background:var(--ember-500)}
.burger i{position:absolute;left:13px;right:13px;height:2px;background:#fff;transition:transform .4s var(--ease),opacity .25s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.burger.is-open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(94vw,420px);z-index:130;background:var(--ink-850);
border-left:4px solid var(--ember-500);transform:translateX(102%);transition:transform .55s var(--ease);
display:flex;flex-direction:column;overflow-y:auto;padding:1.5rem var(--gut) 3rem}
.drawer.is-open{transform:translateX(0)}
.drawer nav a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line-soft);
font-family:var(--display);font-size:1.5rem;text-transform:uppercase}
.drawer nav a:hover{color:var(--wheat-400)}
.drawer details summary{padding:.85rem 0;border-bottom:1px solid var(--line-soft);font-family:var(--display);
font-size:1.5rem;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer details summary::-webkit-details-marker{display:none}
.drawer details summary::after{content:"+";color:var(--ember-400);font-family:var(--sans)}
.drawer details[open] summary::after{content:"–"}
.drawer .sub a{padding-left:1rem;font-family:var(--sans);font-size:.95rem;text-transform:none;color:var(--muted)}
.scrim{position:fixed;inset:0;background:rgba(16,14,12,.78);z-index:120;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.scrim.is-open{opacity:1;visibility:visible}
.progress{position:fixed;top:0;left:0;height:3px;z-index:200;width:0;background:var(--ember-400)}
.give-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;writing-mode:vertical-rl;
background:var(--crimson);color:#fff;padding:1.4rem .75rem;font-size:.82rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;transition:padding .35s var(--ease),background .35s var(--ease)}
.give-rail:hover{padding-inline:1rem;background:var(--ember-500)}
/* ---------- HERO SLIDESHOW ---------- */
.hero{position:relative;height:clamp(600px,96vh,1050px);overflow:hidden;isolation:isolate}
.slides{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--ease-io);pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
.slide-media{position:absolute;inset:0;overflow:hidden}
.slide-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
transform:scale(1.02);transition:transform 9s linear}
.slide.is-on .slide-media img{transform:scale(1.14)}
.slide-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(16,14,12,.93) 0%,rgba(16,14,12,.72) 38%,rgba(16,14,12,.28) 68%,rgba(16,14,12,.6) 100%),
linear-gradient(0deg,rgba(16,14,12,.92) 0%,transparent 45%)}
.hero-inner{position:relative;z-index:5;height:100%;display:flex;align-items:center}
.slide-txt{max-width:min(100%,880px)}
.slide-txt .kicker,.slide-txt h2,.slide-txt p,.slide-txt .row{
opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.slide.is-on .slide-txt .kicker{opacity:1;transform:none;transition-delay:.25s}
.slide.is-on .slide-txt h2{opacity:1;transform:none;transition-delay:.38s}
.slide.is-on .slide-txt p{opacity:1;transform:none;transition-delay:.52s}
.slide.is-on .slide-txt .row{opacity:1;transform:none;transition-delay:.66s}
.slide-txt h2{margin-block:.1em .35em}
.slide-txt p{max-width:52ch}
.hero-ui{position:absolute;left:0;right:0;bottom:0;z-index:8}
.hero-dots{display:flex;gap:.75rem;align-items:center}
.hero-dot{position:relative;width:60px;height:4px;background:rgba(249,245,236,.25);overflow:hidden}
.hero-dot i{position:absolute;inset:0;background:var(--ember-400);transform:scaleX(0);transform-origin:left}
.hero-dot.is-on i{animation:dotfill 7s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}
.hero-arrows{display:flex;gap:.5rem}
.hero-arrow{width:52px;height:52px;border:2px solid rgba(249,245,236,.3);display:grid;place-items:center;
transition:all .35s var(--ease)}
.hero-arrow:hover{background:var(--ember-500);border-color:var(--ember-500)}
.hero-count{font-family:var(--display);font-size:1.1rem;color:var(--muted-2);letter-spacing:.1em}
.hero-count b{color:var(--wheat-400);font-size:1.9rem}
/* stat strip pinned under hero */
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft)}
.hero-strip div{padding:1.5rem 1rem;text-align:center;border-right:1px solid var(--line-soft)}
.hero-strip div:last-child{border-right:0}
.hero-strip b{display:block;font-family:var(--display);font-size:clamp(1.95rem,1.4rem + 1.7vw,3.1rem);color:var(--wheat-400);line-height:1}
.hero-strip span{display:block;margin-top:.5rem;font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
/* ---------- TICKER ---------- */
.ticker{overflow:hidden;background:var(--ember-500);padding-block:.95rem;position:relative}
.ticker-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:2.5rem;padding-right:2.5rem;white-space:nowrap;
font-family:var(--display);font-size:clamp(1.05rem,.95rem + .55vw,1.55rem);text-transform:uppercase;
letter-spacing:.02em;color:#fff}
.ticker-track span::after{content:"✦";font-family:var(--sans);font-size:.55em;color:var(--wheat-200)}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker-dark{background:var(--ink-850);border-block:1px solid var(--line-soft)}
.ticker-dark .ticker-track span{color:var(--wheat-300)}
.ticker-huge{background:var(--ink-900);padding-block:clamp(1.5rem,3vw,3rem)}
.ticker-huge .ticker-track span{font-size:clamp(2.4rem,1.4rem + 4.6vw,6.4rem);color:transparent;
-webkit-text-stroke:2px rgba(255,184,0,.35)}
.ticker-huge .ticker-track span::after{color:var(--ember-500);-webkit-text-stroke:0}
/* ---------- MINISTRY CARDS (all landscape 3:2) ---------- */
.min-card{position:relative;display:block;background:var(--ink-800);overflow:hidden;
transition:transform .5s var(--ease),background .5s var(--ease)}
.min-card:hover{transform:translateY(-8px);background:var(--ink-700)}
.min-card .ph{--ar:3/2}
.min-card .ph::after{content:"";position:absolute;inset:0;
background:linear-gradient(0deg,rgba(16,14,12,.9) 0%,rgba(16,14,12,.15) 55%,transparent 100%)}
.min-no{position:absolute;top:0;left:0;z-index:3;background:var(--ember-500);color:#fff;
font-family:var(--display);font-size:1.05rem;padding:.5rem .95rem;letter-spacing:.05em}
.min-stat{position:absolute;right:1rem;bottom:1rem;z-index:3;text-align:right}
.min-stat b{display:block;font-family:var(--display);font-size:clamp(1.65rem,1.3rem + 1.1vw,2.5rem);
color:var(--wheat-300);line-height:1}
.min-stat span{display:block;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.min-body{padding:1.5rem 1.4rem 1.7rem}
.min-body h3{font-family:var(--display);font-size:clamp(1.4rem,1.15rem + .8vw,1.95rem);
text-transform:none;line-height:1.08;margin-bottom:.7rem;letter-spacing:-.02em}
.min-card:hover .min-body h3{color:var(--wheat-400)}
.min-body p{font-size:1.06rem;color:var(--muted);line-height:1.62}
.min-go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-400)}
.min-card:hover .min-go{color:var(--wheat-400)}
/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-soft)}
.stat{background:var(--paper-2);color:var(--on-paper);padding:clamp(1.75rem,3.4vw,3.25rem) 1.25rem;text-align:center}
.stat b{display:block;color:var(--accent);font-family:var(--display);font-size:clamp(2.4rem,1.5rem + 2.7vw,4.4rem);
color:var(--wheat-400);line-height:.95}
.stat b .p{color:var(--ember-400)}
.stat span{display:block;color:rgba(25,21,16,.6);margin-top:.85rem;font-size:.84rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted-2);line-height:1.6}
.bg-cream .stats{background:rgba(16,14,12,.12)}
.bg-cream .stat{background:var(--cream-100)}
.bg-cream .stat b{color:var(--ember-500)}
.bg-cream .stat span{color:rgba(16,14,12,.55)}
/* ---------- BAND / PARALLAX ---------- */
.band{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(4rem,9vw,8rem)}
.band-media{position:absolute;inset:-12% 0;z-index:0}
.band-media img{width:100%;height:100%;object-fit:cover}
.band-media::after{content:"";position:absolute;inset:0;background:rgba(16,14,12,.82)}
.band-media.is-side::after{background:linear-gradient(90deg,rgba(16,14,12,.95),rgba(16,14,12,.6) 60%,rgba(16,14,12,.85))}
.band>.wrap,.band>.wrap-narrow,.band>.wrap-wide{position:relative;z-index:3}
/* ---------- SCRIPTURE CALLOUT ---------- */
.verse{text-align:center}
.verse .q{font-family:var(--serif);font-style:italic;text-transform:none;line-height:1.15;
font-size:clamp(1.75rem,1.1rem + 2.7vw,3.7rem);text-wrap:balance;letter-spacing:-.02em}
.verse .ref{display:block;margin-top:1.6rem;font-family:var(--script);font-weight:700;
font-size:clamp(1.8rem,1.2rem + 1.8vw,3rem);color:var(--wheat-400)}
/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-media{position:relative;overflow:hidden;min-height:100%}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,6vw,6rem);position:relative;z-index:3}
/* ---------- CHECKS ---------- */
.checks li{display:flex;gap:.85rem;align-items:flex-start;padding:.62rem 0;color:var(--muted);font-size:1.1rem}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:.34rem;background:var(--ember-500);
clip-path:polygon(20% 48%,8% 62%,40% 92%,92% 26%,78% 14%,38% 64%)}
.checks li b{color:var(--wheat-400);font-weight:800}
.bg-cream .checks li{color:rgba(16,14,12,.75)}
/* ---------- TESTIMONY CAROUSEL ---------- */
.tcar{position:relative;overflow:hidden}
.tcar-track{display:flex;transition:transform .7s var(--ease)}
.tcar-slide{flex:0 0 100%;padding-inline:.5rem}
.tq{background:var(--paper-2);color:var(--on-paper);border-left:6px solid var(--ember-500);padding:clamp(1.75rem,4vw,3rem);
display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
.tq .ph{--ar:3/2;width:clamp(190px,26vw,330px);flex:none}
.tq blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.05rem + .9vw,1.8rem);
line-height:1.42;color:var(--cream-50);font-weight:400;letter-spacing:-.015em}
.tq cite{display:block;margin-top:1.2rem;font-style:normal}
.tq cite b{display:block;font-family:var(--display);font-size:1.3rem;text-transform:uppercase;color:var(--wheat-400)}
.tq cite span{display:block;font-family:var(--script);font-size:1.5rem;font-weight:700;color:var(--muted-2)}
.tcar-ui{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}
.tcar-btn{width:48px;height:48px;border:2px solid var(--line-soft);display:grid;place-items:center;transition:all .35s var(--ease)}
.tcar-btn:hover{background:var(--ember-500);border-color:var(--ember-500)}
.tcar-dots{display:flex;gap:.5rem}
.tcar-dots button{width:11px;height:11px;background:rgba(249,245,236,.25);transition:all .35s var(--ease)}
.tcar-dots button.is-on{background:var(--ember-400);width:32px}
/* ---------- VIDEO ---------- */
.vid{position:relative;overflow:hidden;background:var(--ink-700);aspect-ratio:16/9;cursor:pointer}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vid:hover img{transform:scale(1.05)}
.vid::before{content:"";position:absolute;inset:0;background:rgba(16,14,12,.35);z-index:1}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;background:var(--ember-500);
display:grid;place-items:center;transition:transform .45s var(--ease),background .35s var(--ease)}
.play::before{content:"";width:0;height:0;margin-left:6px;border-left:18px solid #fff;border-block:11px solid transparent}
.play::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px solid rgba(255,122,51,.5);
animation:pulse 2.4s var(--ease) infinite}
.vid:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--wheat-400)}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.vid-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.5rem 1.4rem;
background:linear-gradient(0deg,rgba(16,14,12,.95),transparent)}
.vid-meta b{display:block;font-family:var(--display);font-size:1.35rem;text-transform:uppercase;line-height:1}
.vid-meta span{display:block;margin-top:.35rem;font-family:var(--script);font-size:1.45rem;font-weight:700;color:var(--wheat-400)}
/* ---------- PHOTO MARQUEE (panoramas, native ratio) ---------- */
.pmarq{overflow:hidden;position:relative}
.pmarq-track{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite}
.pmarq:hover .pmarq-track{animation-play-state:paused}
.pmarq-track .ph{height:clamp(200px,26vw,360px);width:auto;aspect-ratio:var(--ar)}
.pmarq-track .ph>img{width:auto;height:100%}
/* ---------- GIVING ---------- */
.give-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.give-card{position:relative;background:var(--paper-2);color:var(--on-paper);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;
border-top:5px solid var(--ink-600);transition:transform .5s var(--ease),border-color .4s var(--ease)}
.give-card:hover,.give-card.is-feat{transform:translateY(-8px);border-top-color:var(--ember-500)}
.give-card.is-feat{background:var(--ink-700)}
.give-card .amt{font-family:var(--display);font-size:clamp(2.6rem,1.7rem + 2.2vw,4rem);color:var(--wheat-400);line-height:.95}
.give-card .amt small{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.78rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--ember-400)}
.give-card h3{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;line-height:1}
.give-card p{font-size:1.04rem;color:var(--muted);line-height:1.6;flex:1}
.tag-feat{position:absolute;top:0;right:0;background:var(--crimson);color:#fff;font-size:.58rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;padding:.35rem .8rem}
.qr-card{background:var(--cream-50);color:var(--ink-900);padding:1.5rem;display:flex;flex-direction:column;
align-items:center;gap:.75rem;text-align:center}
.qr-card img{width:min(210px,100%)}
.qr-card b{font-family:var(--display);font-size:1.2rem;text-transform:none}
.qr-card span{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(16,14,12,.55)}
/* ---------- FOOTER ---------- */
.footer{background:var(--ink-850);border-top:4px solid var(--ember-500);position:relative;overflow:hidden}
.footer-top{padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3.5rem)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:2.5rem var(--gut)}
.footer h4{font-family:var(--display);font-size:1.12rem;text-transform:uppercase;color:var(--wheat-400);margin-bottom:1.2rem}
.footer-links li{margin-bottom:.65rem}
.footer-links a{color:var(--muted);font-size:1.04rem;transition:color .3s var(--ease),padding-left .3s var(--ease);display:inline-block}
.footer-links a:hover{color:var(--ember-400);padding-left:.4rem}
.socials{display:flex;gap:.5rem;margin-top:1.3rem}
.socials a{width:42px;height:42px;border:2px solid var(--line-soft);display:grid;place-items:center;
color:var(--muted);transition:all .35s var(--ease)}
.socials a:hover{background:var(--ember-500);border-color:var(--ember-500);color:#fff;transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.footer-bar{border-top:1px solid var(--line-soft);padding-block:1.3rem;display:flex;justify-content:space-between;
align-items:center;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted-2)}
.newsletter{display:flex;gap:.5rem;flex-wrap:wrap}
.newsletter input{flex:1;min-width:190px;background:rgba(249,245,236,.05);border:2px solid var(--line-soft);
padding:.85rem 1rem;color:var(--cream-50);transition:border-color .3s var(--ease)}
.newsletter input:focus{outline:none;border-color:var(--ember-400)}
.newsletter input::placeholder{color:var(--muted-2)}
/* ---------- PRELOADER ---------- */
.preload{position:fixed;inset:0;z-index:300;background:var(--ink-900);display:grid;place-items:center;
transition:opacity .7s var(--ease),visibility .7s}
.preload.is-done{opacity:0;visibility:hidden}
/* CSS failsafe — clears itself even if the script never runs */
.preload{animation:preload-failsafe .6s 2.2s forwards}
@keyframes preload-failsafe{to{opacity:0;visibility:hidden}}
.no-js .preload{display:none}
.preload img{width:150px}
.preload-bar{width:190px;height:3px;background:var(--line-soft);overflow:hidden;margin-top:1.5rem}
.preload-bar i{display:block;height:100%;width:40%;background:var(--ember-400);animation:load 1s var(--ease-io) infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
/* ---------- REVEAL ---------- */
/* ══════════════════════════════════════════════════════════════════════════
REVEAL — v14, rewritten.
THE BUG THIS FIXES (raised ten times as "the page stutters, then loads"):
every [data-rv] element was opacity:0 in the base stylesheet and only became
visible when JavaScript added .is-in. index.html has 66 of them. So the HTML
and CSS would arrive, the browser would paint a page of blank boxes, and only
once the deferred script had parsed and the observer had fired did anything
appear. That is the stutter. It is also why grid cells rendered as empty
beige boxes when the observer missed them.
Now: content is visible by default. The hidden state is scoped to .js, which
is set by a tiny inline script in — so it only ever applies when the
script is actually running, and a failsafe reveals everything after 1.2s
regardless. If JS fails entirely, the page is simply visible with no
animation, which is the correct fallback.
will-change is also gone. Declaring it on 66 elements asks the compositor for
66 permanent GPU layers before anything has moved. It is promoted per-element
only while the reveal is actually pending.
══════════════════════════════════════════════════════════════════════════ */
.js [data-rv]:not(.is-in){opacity:0;will-change:transform,opacity}
.js [data-rv="up"]:not(.is-in){transform:translateY(46px)}
.js [data-rv="left"]:not(.is-in){transform:translateX(56px)}
.js [data-rv="right"]:not(.is-in){transform:translateX(-56px)}
.js [data-rv="scale"]:not(.is-in){transform:scale(.93)}
.js [data-rv="wipe"]:not(.is-in){clip-path:inset(0 100% 0 0);opacity:1}
[data-rv].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);
transition:opacity .95s var(--ease),transform 1.05s var(--ease),clip-path 1.1s var(--ease)}
.ml{display:block;overflow:hidden}
.ml>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.mask.is-in .ml>span{transform:translateY(0)}
.mask.is-in .ml:nth-child(2)>span{transition-delay:.09s}
.mask.is-in .ml:nth-child(3)>span{transition-delay:.18s}
.mask.is-in .ml:nth-child(4)>span{transition-delay:.27s}
.js [data-stg]:not(.is-in)>*{opacity:0;transform:translateY(34px)}
[data-stg].is-in>*{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .95s var(--ease)}
[data-stg].is-in>*:nth-child(1){transition-delay:.02s}
[data-stg].is-in>*:nth-child(2){transition-delay:.09s}
[data-stg].is-in>*:nth-child(3){transition-delay:.16s}
[data-stg].is-in>*:nth-child(4){transition-delay:.23s}
[data-stg].is-in>*:nth-child(5){transition-delay:.30s}
[data-stg].is-in>*:nth-child(6){transition-delay:.37s}
[data-stg].is-in>*:nth-child(7){transition-delay:.44s}
[data-stg].is-in>*:nth-child(8){transition-delay:.51s}
[data-stg].is-in>*:nth-child(9){transition-delay:.58s}
[data-stg].is-in>*:nth-child(10){transition-delay:.65s}
[data-px]{will-change:transform}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
.mega-grid{grid-template-columns:repeat(2,1fr) 1fr}
.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
.footer-grid>*:nth-child(4){grid-column:1/-1}
}
@media (max-width:1024px){
.nav,.give-rail{display:none}
.burger{display:block}
.g-7-5,.g-5-7,.g-6-6,.g2{grid-template-columns:1fr}
.g3,.g4{grid-template-columns:repeat(2,1fr)}
.split{grid-template-columns:1fr}
.split-media{min-height:58vw}
.give-grid{grid-template-columns:1fr 1fr}
.tq{grid-template-columns:1fr;text-align:center;justify-items:center}
.tq .ph{width:min(100%,420px)}
}
@media (max-width:760px){
.g3,.g4,.give-grid{grid-template-columns:1fr}
.stats,.hero-strip{grid-template-columns:repeat(2,1fr)}
.hero-strip div:nth-child(2n){border-right:0}
.hero-strip div{border-bottom:1px solid var(--line-soft)}
.footer-grid{grid-template-columns:1fr}
.hide-mob{display:none}
.topbar .v{display:none}
.hero{height:88vh}
.hero-arrows{display:none}
.cut-t,.cut-b,.cut-tb{clip-path:none}
.btn{padding:.95rem 1.5rem;font-size:.72rem}
}
/* ==========================================================================
v3 ADDITIONS — photo effects · scroll-story · compare · sticky give
========================================================================== */
/* ---------- PHOTO EFFECT SYSTEM ---------- */
/* every .ph can take one or more of these. All respect the frame ratio. */
/* 1. duotone wash that burns off on hover */
.fx-duo>img{transition:filter .9s var(--ease),transform 1.5s var(--ease)}
.fx-duo::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(155deg,rgba(232,93,31,.55),rgba(16,14,12,.55) 55%,rgba(255,184,0,.35));
mix-blend-mode:color;opacity:.85;transition:opacity .8s var(--ease);
}
.fx-duo:hover::after{opacity:0}
.fx-duo:hover>img{transform:scale(1.05)}
/* 2. ember veil that slides away */
.fx-veil::before{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:var(--ember-500);transform-origin:bottom;
transition:transform .85s var(--ease-io);
}
.fx-veil:hover::before{transform:scaleY(0)}
/* 3. inner parallax — the image drifts inside its own frame on scroll */
.fx-drift{overflow:hidden}
.fx-drift>img{height:118%;object-position:center 50%;will-change:transform}
/* 4. grade: rich, warm, contrasty — then full colour on hover */
.fx-grade>img{filter:saturate(.72) contrast(1.12) brightness(.9);transition:filter 1s var(--ease),transform 1.5s var(--ease)}
.fx-grade:hover>img{filter:saturate(1.08) contrast(1.02) brightness(1)}
.fx-grade:hover>img{transform:scale(1.04)}
/* 5. spotlight vignette that opens up */
.fx-spot::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(120% 90% at 50% 45%,transparent 25%,rgba(16,14,12,.82) 100%);
transition:opacity .8s var(--ease);
}
.fx-spot:hover::after{opacity:.35}
/* 6. corner brackets — editorial framing */
.fx-brk::before,.fx-brk::after{
content:"";position:absolute;width:38px;height:38px;z-index:4;pointer-events:none;
border:3px solid var(--wheat-400);transition:all .55s var(--ease);
}
.fx-brk::before{top:14px;left:14px;border-right:0;border-bottom:0}
.fx-brk::after{bottom:14px;right:14px;border-left:0;border-top:0}
.fx-brk:hover::before{top:8px;left:8px;width:52px;height:52px}
.fx-brk:hover::after{bottom:8px;right:8px;width:52px;height:52px}
/* 7. tilt on hover */
.fx-tilt{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.fx-tilt:hover{transform:perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-8px);
box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
/* 8. scroll wipe reveal (JS adds .is-in) */
.fx-wipe{clip-path:inset(0 0 100% 0)}
.fx-wipe.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.25s var(--ease)}
.fx-wipe-l{clip-path:inset(0 100% 0 0)}
.fx-wipe-l.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.25s var(--ease)}
/* caption plate */
.ph-cap{
position:absolute;left:0;bottom:0;z-index:5;background:var(--ink-900);color:var(--cream-50);
font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:.7rem 1.1rem;max-width:80%;
}
.ph-cap em{font-family:var(--script);font-style:normal;font-size:1.35rem;color:var(--wheat-400);
text-transform:none;letter-spacing:0;margin-right:.5rem}
/* ---------- SCROLL STORY (pinned chapters) ---------- */
.story{position:relative}
.story-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink-900)}
.story-layer{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease-io)}
.story-layer.is-on{opacity:1}
.story-layer img{width:100%;height:100%;object-fit:cover}
.story-layer::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(16,14,12,.94),rgba(16,14,12,.55) 55%,rgba(16,14,12,.8))}
.story-copy{position:absolute;inset:0;z-index:4;display:grid;place-items:center}
.story-panel{grid-area:1/1;width:100%;
opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .9s var(--ease);
pointer-events:none}
.story-panel.is-on{opacity:1;transform:none;pointer-events:auto}
.story-steps{position:relative;z-index:1}
.story-step{height:100vh}
.story-prog{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);z-index:6;
display:flex;flex-direction:column;gap:.6rem}
.story-prog i{display:block;width:3px;height:40px;background:rgba(249,245,236,.2);transition:background .4s}
.story-prog i.is-on{background:var(--ember-400)}
/* ---------- BEFORE / AFTER COMPARE ---------- */
.cmp{position:relative;overflow:hidden;aspect-ratio:var(--ar,3/2);cursor:ew-resize;user-select:none;background:var(--ink-700)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .cmp-after{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;background:var(--wheat-400);z-index:5;
transform:translateX(-50%);pointer-events:none}
.cmp-handle::after{
content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:56px;height:56px;border-radius:50%;background:var(--wheat-400);color:var(--ink-900);
display:grid;place-items:center;font-size:1.5rem;font-weight:800;
box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.cmp-tag{position:absolute;top:1rem;z-index:6;background:var(--ink-900);color:var(--cream-50);
font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .8rem}
.cmp-tag.l{left:1rem}
.cmp-tag.r{right:1rem;background:var(--ember-500)}
/* ---------- STICKY GIVE BAR ---------- */
.givebar{
position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--ink-850);
border-top:3px solid var(--ember-500);transform:translateY(110%);
transition:transform .6s var(--ease);box-shadow:0 -20px 50px -20px rgba(0,0,0,.7);
}
.givebar.is-on{transform:translateY(0)}
.givebar .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
padding-block:.9rem;flex-wrap:wrap}
.givebar-txt{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.givebar-txt b{font-family:var(--display);font-size:clamp(1.1rem,1rem + .6vw,1.6rem);text-transform:uppercase;line-height:1}
.givebar-txt span{font-family:var(--script);font-size:1.4rem;font-weight:700;color:var(--wheat-400);line-height:1}
.givebar-amts{display:flex;gap:.5rem;flex-wrap:wrap}
.givebar-amt{border:2px solid var(--line-soft);padding:.55rem 1rem;font-weight:800;font-size:.95rem;
transition:all .3s var(--ease)}
.givebar-amt:hover,.givebar-amt.is-on{background:var(--ember-500);border-color:var(--ember-500);color:#fff}
.givebar-x{width:34px;height:34px;border:2px solid var(--line-soft);display:grid;place-items:center;flex:none}
.givebar-x:hover{background:var(--crimson);border-color:var(--crimson)}
/* ---------- LIVE IMPACT PANEL ---------- */
.impact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.impact-amt{font-family:var(--display);font-size:clamp(3.2rem,1.8rem + 4.6vw,6.8rem);color:var(--wheat-400);line-height:.92}
.impact-list li{display:flex;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line-soft);
font-size:1.1rem;color:var(--muted)}
.impact-list li b{font-family:var(--display);font-size:2rem;color:var(--ember-400);min-width:2.6em;line-height:1}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);padding:0;border:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;background:var(--ember-500);
border:4px solid var(--cream-50);cursor:grab;box-shadow:0 4px 14px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;background:var(--ember-500);border:4px solid var(--cream-50);cursor:grab}
/* ---------- EDITORIAL BROKEN GRID ---------- */
.edit-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.75rem,1.6vw,1.4rem);align-items:start}
.e-a{grid-column:1/7}
.e-b{grid-column:8/13;margin-top:clamp(2rem,7vw,7rem)}
.e-c{grid-column:2/8;margin-top:clamp(1rem,3vw,3rem)}
.e-d{grid-column:8/13}
.e-full{grid-column:1/13}
.pull{
font-family:var(--display);text-transform:uppercase;line-height:.95;
font-size:clamp(1.6rem,1rem + 2.4vw,3.2rem);color:var(--wheat-400);
border-left:6px solid var(--ember-500);padding-left:1.25rem;
}
/* ---------- VERSE PLATE (inline scripture) ---------- */
.plate{
background:var(--ember-500);color:#fff;padding:clamp(1.5rem,3.5vw,2.75rem);
display:flex;flex-direction:column;gap:.75rem;
}
.plate q{font-family:var(--serif);font-style:italic;text-transform:none;line-height:1.22;quotes:none;
font-size:clamp(1.3rem,1.05rem + 1.15vw,2.05rem);letter-spacing:-.015em}
.plate cite{font-family:var(--script);font-style:normal;font-size:1.6rem;font-weight:700;color:var(--wheat-200)}
.plate-dark{background:var(--paper-2);color:var(--on-paper);border-left:6px solid var(--wheat-400)}
.plate-dark q{color:var(--cream-50)}
.plate-dark cite{color:var(--wheat-400)}
@media (max-width:1024px){
.impact{grid-template-columns:1fr}
.e-a,.e-b,.e-c,.e-d{grid-column:1/13;margin-top:0}
.story-stage{height:88vh}
}
@media (max-width:760px){
.givebar .wrap-wide{padding-block:.7rem}
.givebar-txt span{display:none}
.fx-brk::before,.fx-brk::after{width:26px;height:26px}
}
/* ---------- v4: jade counterpoint, palms, Psalms ---------- */
.bar-jade{background:var(--jade-500);color:var(--cream-50)}
.tint-jade{color:var(--jade-300)}
.btn-jade{background:var(--jade-500);border-color:var(--jade-500);color:var(--cream-50)}
.btn-jade::before{background:var(--jade-300)}
.btn-jade:hover{color:var(--ink-900);border-color:var(--jade-300)}
.bg-jade{background:var(--jade-600);color:var(--cream-50)}
.plate-jade{background:var(--jade-500)}
.plate-jade cite{color:var(--jade-300)}
/* palm-frond divider — drawn, not an image */
.fronds{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--wheat-400)}
.fronds::before,.fronds::after{content:"";height:2px;flex:1;max-width:220px;
background:linear-gradient(90deg,transparent,var(--line),transparent)}
.fronds svg{width:64px;height:40px;flex:none}
/* palm silhouette band behind a section */
.palmband{position:relative;overflow:hidden}
.palmband::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:min(30vw,260px);z-index:1;pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'%3E%3Cg fill='%23100E0C' opacity='.55'%3E%3Cpath d='M120 260V150c-18-30-52-44-80-40 22-22 62-18 80 4V90c-16-34-54-50-84-46 26-26 70-18 88 8 6-30 34-52 66-52-28 14-44 38-44 62 22-24 62-30 88-8-32-6-70 12-86 46v24c20-22 60-26 82-4-28-4-62 10-80 40v110z'/%3E%3Cpath d='M1000 260V170c-14-24-42-36-64-32 18-18 50-14 64 4v-34c-13-27-43-40-67-37 21-21 56-14 70 7 5-24 27-42 53-42-22 11-35 30-35 50 18-19 50-24 70-7-26-5-56 10-69 37v20c16-18 48-21 66-3-22-3-50 8-64 32v95z'/%3E%3C/g%3E%3C/svg%3E") bottom center/cover no-repeat;
}
.palmband>*{position:relative;z-index:2}
/* leadership duo block */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem)}
.duo figure{margin:0}
.duo figcaption{padding-top:1rem}
.duo figcaption b{display:block;font-family:var(--display);font-weight:800;
font-size:clamp(1.2rem,1.02rem + .65vw,1.65rem);text-transform:none;line-height:1.1;letter-spacing:-.025em}
.duo figcaption span{display:block;font-family:var(--script);font-size:1.45rem;font-weight:700;color:var(--wheat-400);margin-top:.25rem}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
/* christmas ribbon strip */
.xmas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
@media (max-width:900px){.xmas-grid{grid-template-columns:repeat(2,1fr)}}
/* v5 light-theme layer removed — the site is light-first by default now */
:root{color-scheme:light}
/* things that must NOT simply follow the token flip */
/* the cream accent band inverts to carbon in light mode */
/* cards + surfaces read as paper, so they need a hairline */
/* full-bleed photo sections stay dark in both themes — the images need it */
/* ==========================================================================
v6 — SIGNATURE ANIMATIONS
Water (clean water projects) · Bible (the Word) · Wheat (harvest) · Flame (church)
All CSS/SVG. No libraries. All disabled under prefers-reduced-motion.
========================================================================== */
/* ---------- WATER ---------- */
.water{position:relative;overflow:hidden;background:var(--jade-600);aspect-ratio:var(--ar,3/2)}
.water-img{position:absolute;inset:0}
.water-img img{width:100%;height:100%;object-fit:cover}
/* rising body of water */
.water-body{
position:absolute;left:-10%;right:-10%;bottom:0;height:0;z-index:3;
background:linear-gradient(180deg,rgba(79,214,180,.42),rgba(15,90,78,.72));
transition:height 2.4s var(--ease-io);
}
.water.is-in .water-body{height:42%}
/* two wave crests, counter-scrolling */
.water-body::before,.water-body::after{
content:"";position:absolute;left:0;right:0;bottom:100%;height:26px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V10c20-8 40 8 60 0s40-16 60-8 40 16 60 8 40-12 60-8v24z' fill='%234FD6B4' fill-opacity='.5'/%3E%3C/svg%3E") repeat-x 0 bottom/240px 26px;
animation:wave 7s linear infinite;
}
.water-body::after{
bottom:calc(100% - 7px);opacity:.55;animation:wave 11s linear infinite reverse;
}
@keyframes wave{to{background-position-x:240px}}
/* falling droplets */
.water-drop{position:absolute;top:-6%;z-index:4;width:9px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
background:linear-gradient(180deg,rgba(249,245,236,.95),rgba(79,214,180,.85));
animation:drop 2.6s var(--ease-io) infinite}
.water-drop:nth-child(1){left:22%;animation-delay:0s}
.water-drop:nth-child(2){left:47%;animation-delay:.7s}
.water-drop:nth-child(3){left:68%;animation-delay:1.4s}
.water-drop:nth-child(4){left:83%;animation-delay:2.1s}
@keyframes drop{
0%{transform:translateY(0) scaleY(.7);opacity:0}
12%{opacity:1}
70%{transform:translateY(58vh) scaleY(1.25);opacity:1}
78%{transform:translateY(60vh) scaleY(.4);opacity:.4}
100%{transform:translateY(60vh) scaleY(.2);opacity:0}
}
/* expanding ripple rings on the surface */
.water-ripple{position:absolute;left:50%;bottom:38%;z-index:4;width:20px;height:8px;
border:2px solid rgba(79,214,180,.7);border-radius:50%;transform:translateX(-50%);
animation:ripple 3.4s var(--ease) infinite}
.water-ripple:nth-of-type(2){animation-delay:1.1s;left:32%}
.water-ripple:nth-of-type(3){animation-delay:2.2s;left:70%}
@keyframes ripple{
0%{transform:translateX(-50%) scale(.3);opacity:0}
20%{opacity:.9}
100%{transform:translateX(-50%) scale(6);opacity:0}
}
/* the pump handle nods */
.water-pump{position:absolute;right:6%;bottom:34%;z-index:5;width:clamp(70px,11vw,130px);color:var(--wheat-300)}
.water-pump .handle{transform-origin:74px 30px;animation:pump 2.6s var(--ease-io) infinite}
@keyframes pump{0%,100%{transform:rotate(0)}45%{transform:rotate(-19deg)}}
.water-cap{position:absolute;left:1.25rem;bottom:1.25rem;z-index:6}
/* ---------- BIBLE ---------- */
.bible{position:relative;display:grid;place-items:center;padding:clamp(2rem,5vw,4rem) 0;overflow:hidden}
/* light behind the book */
.bible::before{
content:"";position:absolute;width:min(78%,620px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(255,184,0,.30),rgba(255,184,0,.07) 45%,transparent 70%);
animation:halo 6s var(--ease-io) infinite;
}
@keyframes halo{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.bible svg{position:relative;width:min(100%,540px);height:auto;overflow:visible}
.bible .cover{fill:var(--ink-700);stroke:var(--wheat-500);stroke-width:2}
.bible .leaf{fill:var(--cream-50);stroke:rgba(168,114,0,.35);stroke-width:1;transform-origin:250px 40px}
/* pages turn, one after another, forever */
.bible .leaf.f1{animation:turn 9s var(--ease-io) infinite}
.bible .leaf.f2{animation:turn 9s var(--ease-io) infinite 1.5s}
.bible .leaf.f3{animation:turn 9s var(--ease-io) infinite 3s}
@keyframes turn{
0%,8%{transform:rotateY(0deg);opacity:1}
26%{transform:rotateY(-118deg);opacity:.94}
44%,100%{transform:rotateY(-180deg);opacity:1}
}
.bible .rule{stroke:rgba(168,114,0,.4);stroke-width:1.4;stroke-linecap:round}
.bible .cross{stroke:var(--wheat-400);stroke-width:3;stroke-linecap:round}
/* rays of light climbing out of the open book */
.bible .ray{stroke:var(--wheat-300);stroke-width:2;stroke-linecap:round;opacity:0;
animation:ray 4.5s var(--ease-io) infinite}
.bible .ray:nth-of-type(2){animation-delay:.4s}
.bible .ray:nth-of-type(3){animation-delay:.8s}
.bible .ray:nth-of-type(4){animation-delay:1.2s}
.bible .ray:nth-of-type(5){animation-delay:1.6s}
@keyframes ray{0%{opacity:0;transform:translateY(6px) scaleY(.5)}40%{opacity:.85}100%{opacity:0;transform:translateY(-26px) scaleY(1.25)}}
.bible-wrap{position:relative;perspective:1400px}
/* ---------- WHEAT (grows on scroll) ---------- */
.wheat-grow{width:clamp(46px,7vw,86px);color:var(--wheat-400)}
.wheat-grow path{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;
stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);}
.wheat-grow.is-in path{animation:grow 2.2s var(--ease) forwards}
.wheat-grow.is-in path:nth-child(2){animation-delay:.35s}
.wheat-grow.is-in path:nth-child(3){animation-delay:.6s}
.wheat-grow.is-in path:nth-child(4){animation-delay:.85s}
@keyframes grow{to{stroke-dashoffset:0}}
/* ---------- FLAME ---------- */
.flame{width:26px;height:38px;position:relative;flex:none}
.flame i{position:absolute;inset:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
background:linear-gradient(180deg,var(--wheat-200),var(--ember-400) 62%,var(--crimson));
filter:blur(.4px);transform-origin:50% 90%;animation:flick 1.5s var(--ease-io) infinite alternate}
.flame i:nth-child(2){inset:22% 26% 6%;background:linear-gradient(180deg,#fff,var(--wheat-300));
animation-duration:1.1s;opacity:.9}
@keyframes flick{
0%{transform:scale(1) skewX(0) translateY(0)}
50%{transform:scale(1.06,.96) skewX(4deg) translateY(-1px)}
100%{transform:scale(.96,1.05) skewX(-4deg) translateY(1px)}
}
/* ---------- COMPARE: callout labels ---------- */
.cmp-note{
position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:7;
background:var(--ink-900);color:var(--cream-50);
font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:.5rem 1rem;white-space:nowrap;pointer-events:none;
display:flex;align-items:center;gap:.5rem;
}
.cmp-note::before{content:"⇄";color:var(--wheat-400);font-size:1.1em}
.cmp:hover .cmp-note{opacity:0;transition:opacity .3s}
.cmp-stack{display:grid;gap:clamp(1rem,2.5vw,2rem)}
@media (prefers-reduced-motion:reduce){
.water-body{height:42%!important;transition:none}
.water-body::before,.water-body::after,.water-drop,.water-ripple,
.water-pump .handle,.bible::before,.bible .leaf,.bible .ray,.flame i{animation:none!important}
.water-drop,.water-ripple{display:none}
.wheat-grow path{stroke-dashoffset:0!important;animation:none!important}
}
/* ==========================================================================
v7 — INTERIOR PAGE COMPONENTS
page hero · breadcrumb · accordion · filters · masonry · lightbox
timeline · pillars · forms · bank table · team
========================================================================== */
/* ---------- PAGE HERO ---------- */
.phero{position:relative;overflow:hidden;isolation:isolate;
padding-block:clamp(6rem,14vh,10rem) clamp(3.5rem,8vh,6rem)}
.phero-media{position:absolute;inset:-8% 0}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.phero-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(16,14,12,.9),rgba(16,14,12,.6) 45%,rgba(16,14,12,.95)),
linear-gradient(90deg,rgba(16,14,12,.85),transparent 65%)}
.phero>.wrap,.phero>.wrap-narrow{position:relative;z-index:4}
.phero,.phero .lead{color:var(--cream-50)}
.crumb{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(249,245,236,.55);margin-bottom:1.2rem}
.crumb i{color:var(--wheat-400);font-style:normal}
.crumb a:hover{color:var(--wheat-400)}
/* ---------- ACCORDION ---------- */
.acc{border-top:1px solid var(--line-soft)}
.acc-item{border-bottom:1px solid var(--line-soft)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;text-align:left;
padding:1.4rem 0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
font-size:clamp(1.08rem,1rem + .55vw,1.45rem);line-height:1.24;transition:color .35s var(--ease)}
.acc-q:hover,.acc-item.is-open .acc-q{color:var(--wheat-400)}
.acc-q i{flex:none;width:36px;height:36px;border:2px solid var(--line);border-radius:50%;position:relative;
transition:background .35s var(--ease),transform .45s var(--ease)}
.acc-q i::before,.acc-q i::after{content:"";position:absolute;inset:50% 9px auto;height:2px;
background:var(--wheat-400);transform:translateY(-50%)}
.acc-q i::after{transform:translateY(-50%) rotate(90deg);transition:transform .45s var(--ease)}
.acc-item.is-open .acc-q i{background:rgba(255,184,0,.14);transform:rotate(180deg)}
.acc-item.is-open .acc-q i::after{transform:translateY(-50%) rotate(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.acc-a>div{padding-bottom:1.5rem;color:var(--muted);max-width:74ch}
.acc-a a{color:var(--wheat-400);text-decoration:underline;text-underline-offset:3px}
/* ---------- FILTERS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.5rem}
.filter{padding:.6rem 1.1rem;border:2px solid var(--line-soft);
font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
transition:all .35s var(--ease)}
.filter:hover{border-color:var(--line);color:var(--fg)}
.filter.is-on{background:var(--ember-500);border-color:var(--ember-500);color:#fff}
/* ---------- MASONRY GALLERY ---------- */
.masonry{columns:4;column-gap:14px}
.masonry>*{break-inside:avoid;margin-bottom:14px}
.gal{position:relative;display:block;overflow:hidden;background:var(--ink-700);cursor:zoom-in}
.gal img{width:100%;display:block;transition:transform 1.2s var(--ease),filter .8s var(--ease);
filter:saturate(.82) contrast(1.06)}
.gal:hover img{transform:scale(1.06);filter:saturate(1.05) contrast(1)}
.gal::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
background:linear-gradient(0deg,rgba(16,14,12,.9),transparent 58%)}
.gal:hover::after{opacity:1}
.gal figcaption{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;
font-size:.86rem;font-weight:600;color:#F9F5EC;opacity:0;transform:translateY(10px);
transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gal:hover figcaption{opacity:1;transform:none}
.gal.is-hidden{display:none}
/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:220;background:rgba(10,8,6,.97);
display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3.5rem);
opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;box-shadow:var(--shadow-lift)}
.lb-cap{position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2.5rem);text-align:center;
font-size:.9rem;color:rgba(249,245,236,.7)}
.lb-x,.lb-prev,.lb-next{position:absolute;width:52px;height:52px;border:2px solid rgba(249,245,236,.25);
display:grid;place-items:center;color:#F9F5EC;background:rgba(16,14,12,.6);transition:all .35s var(--ease)}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:var(--ember-500);border-color:var(--ember-500)}
.lb-x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.75rem,2.5vw,2rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.75rem,2.5vw,2rem);top:50%;transform:translateY(-50%)}
/* ---------- TIMELINE ---------- */
.tl{position:relative;padding-left:clamp(1.75rem,4vw,3.25rem)}
.tl::before{content:"";position:absolute;left:5px;top:.7rem;bottom:.7rem;width:2px;
background:linear-gradient(180deg,var(--wheat-400),var(--line),transparent)}
.tl-item{position:relative;padding-bottom:2.5rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:calc(-1*clamp(1.75rem,4vw,3.25rem));top:.6rem;
width:12px;height:12px;background:var(--ember-500)}
.tl-item .yr{display:block;font-family:var(--script);font-size:1.5rem;font-weight:700;
color:var(--wheat-400);margin-bottom:.3rem}
/* ---------- PILLARS ---------- */
.pillar{padding:1.7rem 0;border-top:1px solid var(--line-soft);
display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.pillar .n{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ember-400);line-height:1}
.pillar h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem);margin-bottom:.4rem}
.pillar p{color:var(--muted);font-size:1.02rem;max-width:62ch}
@media (max-width:640px){.pillar{grid-template-columns:1fr;gap:.5rem}}
/* ---------- FORMS ---------- */
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--wheat-400)}
.field input,.field textarea,.field select{width:100%;background:rgba(249,245,236,.04);
border:2px solid var(--line-soft);padding:.95rem 1.05rem;color:var(--fg);
transition:border-color .35s var(--ease),background .35s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ember-400)}
.field textarea{min-height:150px;resize:vertical}
.form-note{font-size:.9rem;color:var(--muted-2)}
/* ---------- BANK TABLE ---------- */
.bank{width:100%;border-collapse:collapse;font-size:1rem}
.bank tr{border-bottom:1px solid var(--line-soft)}
.bank th{text-align:left;padding:.9rem 1rem .9rem 0;width:40%;vertical-align:top;
font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.bank td{padding:.9rem 0;font-weight:700;word-break:break-word;font-variant-numeric:tabular-nums}
.copy-btn{margin-left:.6rem;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--wheat-400);border:2px solid var(--line);padding:.2rem .55rem;vertical-align:middle;
transition:all .3s var(--ease)}
.copy-btn:hover{background:var(--wheat-400);color:var(--ink-900);border-color:var(--wheat-400)}
@media (max-width:640px){
.bank th{width:auto;display:block;padding-bottom:.1rem}
.bank td{display:block;padding-top:.1rem;padding-bottom:.85rem}
}
/* ---------- TEAM ---------- */
.team-card{background:var(--paper-2);color:var(--on-paper);overflow:hidden;transition:transform .5s var(--ease)}
.team-card:hover{transform:translateY(-7px)}
.team-card .body-pad{padding:1.3rem 1.25rem 1.5rem}
.team-card b{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
font-size:clamp(1.1rem,1rem + .5vw,1.4rem)}
.team-card span{display:block;font-family:var(--script);font-size:1.3rem;font-weight:700;color:var(--wheat-400)}
@media (max-width:1180px){.masonry{columns:3}}
@media (max-width:760px){.masonry{columns:2}}
@media (max-width:460px){.masonry{columns:1}}
/* serif-italic marigold accent inside display headings — the elegant counterpoint
to Clash Display's geometry. Used in the ministry page headlines. */
.italic-gold{
font-family:var(--serif);font-style:italic;font-weight:400;
color:var(--wheat-400);letter-spacing:-.01em;
}
/* ==========================================================================
v8 — MODERN SLAVERY: chains, dust, debt ledger
========================================================================== */
.slave-hero{background:#0B0908}
.chainrule{display:flex;align-items:center;justify-content:center;gap:0;color:var(--crimson);overflow:hidden}
.chainrule svg{width:100%;height:26px;opacity:.8}
.chainrule .lnk{stroke:currentColor;stroke-width:3;fill:none}
/* a chain that snaps apart when it scrolls into view */
.chainbreak{display:grid;place-items:center;padding:clamp(1.5rem,4vw,3rem) 0;overflow:hidden}
.chainbreak svg{width:min(100%,620px);height:auto;overflow:visible}
.chainbreak .lnk{stroke:var(--wheat-400);stroke-width:7;fill:none;stroke-linecap:round}
.chainbreak .L,.chainbreak .R{transition:transform 1.1s var(--ease),opacity 1s var(--ease)}
.chainbreak.is-in .L{transform:translateX(-46px) rotate(-9deg)}
.chainbreak.is-in .R{transform:translateX(46px) rotate(9deg)}
.chainbreak .snap{opacity:0;transition:opacity .5s var(--ease) .35s}
.chainbreak.is-in .snap{opacity:1}
.chainbreak .spark{stroke:var(--ember-400);stroke-width:4;stroke-linecap:round;opacity:0}
.chainbreak.is-in .spark{animation:spark .85s var(--ease) .3s}
@keyframes spark{0%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
/* debt ledger — the number that never goes down */
.ledger{background:var(--paper-2);color:var(--on-paper);border-left:6px solid var(--crimson);padding:clamp(1.5rem,3.5vw,2.5rem)}
.ledger h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:1.3rem;margin-bottom:1rem}
.ledger table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ledger td{padding:.55rem 0;border-bottom:1px solid var(--line-soft);font-size:1.02rem}
.ledger td:last-child{text-align:right;font-weight:700}
.ledger .up{color:var(--crimson)}
.ledger .down{color:var(--jade-300)}
.ledger tr:last-child td{border-bottom:0;padding-top:1rem;font-family:var(--display);font-size:1.35rem;font-weight:600}
/* every slavery photo carries an extra identity-safety treatment */
.ph-safe>img{filter:saturate(.88) contrast(1.04)}
.ph-safe::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
mix-blend-mode:overlay;
}
.safe-note{
display:inline-flex;align-items:center;gap:.5rem;background:var(--ink-800);
border:1px solid var(--line-soft);padding:.5rem .9rem;
font-size:.8rem;font-weight:600;color:var(--muted-2);
}
.safe-note::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--jade-400);flex:none}
/* fact strip */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft)}
.fact{background:var(--paper-2);color:var(--on-paper);padding:clamp(1.5rem,3vw,2.5rem)}
.fact b{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.03em;
font-size:clamp(2rem,1.4rem + 2vw,3.4rem);color:var(--crimson);line-height:1}
.fact span{display:block;margin-top:.6rem;color:var(--muted);font-size:1rem;line-height:1.55}
.fact cite{display:block;margin-top:.7rem;font-style:normal;font-size:.78rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
@media (max-width:860px){.facts{grid-template-columns:1fr}}
/* ==========================================================================
v9 — quick give · team · photo carousel · header/footer polish
========================================================================== */
/* ---------- QUICK GIVE / TALK TO US (floating) ---------- */
.qg{position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:96;
display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.qg-panel{
width:min(88vw,340px);background:var(--ink-800);border:1px solid var(--line-soft);
border-bottom:4px solid var(--ember-500);padding:1.4rem;box-shadow:var(--shadow-lift);
opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;
transition:opacity .35s var(--ease),transform .4s var(--ease),visibility .35s;
}
.qg.is-open .qg-panel{opacity:1;visibility:visible;transform:none}
.qg-panel h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:1.25rem;margin-bottom:.2rem}
.qg-panel p{font-size:.92rem;color:var(--muted);line-height:1.5;margin-bottom:1rem}
.qg-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.8rem}
.qg-amts a{border:2px solid var(--line-soft);padding:.55rem .2rem;text-align:center;
font-weight:800;font-size:.92rem;transition:all .25s var(--ease)}
.qg-amts a:hover{background:var(--wheat-400);border-color:var(--wheat-400);color:var(--ink-900)}
.qg-people{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.qg-person{display:flex;align-items:center;gap:.7rem;padding:.5rem;transition:background .25s var(--ease)}
.qg-person:hover{background:rgba(255,184,0,.09)}
.qg-person img{width:42px;height:42px;object-fit:cover;border-radius:50%;flex:none}
.qg-person b{display:block;font-size:.95rem;font-weight:700;line-height:1.2}
.qg-person span{display:block;font-size:.8rem;color:var(--muted-2)}
.qg-person .wa{margin-left:auto;color:#25D366;flex:none}
.qg-person .wa svg{width:22px;height:22px}
.qg-fab{
display:inline-flex;align-items:center;gap:.6rem;background:var(--ember-500);color:#fff;
padding:.95rem 1.4rem;font-weight:800;font-size:.92rem;letter-spacing:.02em;
box-shadow:0 14px 34px -12px rgba(232,93,31,.75);transition:all .3s var(--ease);
}
.qg-fab:hover{background:var(--wheat-400);color:var(--ink-900);transform:translateY(-2px)}
.qg-fab .heart{width:19px;height:19px;animation:beat 2.2s var(--ease-io) infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}36%{transform:scale(1.15)}}
.qg.is-open .qg-fab .heart{animation:none}
@media (max-width:600px){.qg-fab span{display:none}.qg-fab{padding:1rem;border-radius:50%}}
/* ---------- PHOTO CAROUSEL (donate page) ---------- */
.pcar{overflow:hidden;position:relative}
.pcar-track{display:flex;gap:14px;width:max-content;animation:pslide 46s linear infinite}
.pcar:hover .pcar-track{animation-play-state:paused}
.pcar-slide{width:clamp(240px,26vw,400px);flex:none}
.pcar-slide .ph{width:100%}
@keyframes pslide{to{transform:translateX(-50%)}}
.pcar::before,.pcar::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:3;pointer-events:none}
.pcar::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent)}
.pcar::after{right:0;background:linear-gradient(270deg,var(--ink-900),transparent)}
.bg-ink-2 .pcar::before{background:linear-gradient(90deg,var(--ink-850),transparent)}
.bg-ink-2 .pcar::after{background:linear-gradient(270deg,var(--ink-850),transparent)}
/* ---------- TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem)}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}
.tcard{position:relative;background:var(--paper-2);color:var(--on-paper);overflow:hidden;
transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tcard:hover{transform:translateY(-9px);box-shadow:var(--shadow-lift)}
.tcard .ph{--ar:1/1}
.tcard-body{padding:1.3rem 1.3rem 1.6rem}
.tcard b{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.025em;
font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.1}
.tcard .role{display:block;font-family:var(--script);font-size:1.35rem;font-weight:700;
color:var(--wheat-400);margin-top:.15rem}
.tcard p{margin-top:.7rem;font-size:.95rem;color:var(--muted);line-height:1.55}
.tcard .wa{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
font-size:.82rem;font-weight:800;letter-spacing:.06em;color:#25D366}
.tcard .wa svg{width:17px;height:17px}
/* pastor row — the wider team */
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.crew figure{margin:0}
.crew figcaption{margin-top:.6rem;font-size:.9rem;font-weight:700}
.crew figcaption span{display:block;font-weight:400;font-size:.82rem;color:var(--muted-2)}
/* ---------- HEADER POLISH ---------- */
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:0;transition:opacity .4s}
.header.is-stuck::after{opacity:1}
.nav>li>a,.nav>li>button{border-radius:2px}
.nav>li>a::before{content:"";position:absolute;inset:.25rem .4rem;background:rgba(255,184,0,.09);
opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav>li>a:hover::before{opacity:1;transform:scale(1)}
.topbar .meta a{transition:color .3s var(--ease)}
.brand{position:relative}
.brand::after{content:"";position:absolute;inset:-6px -10px;border:1px solid transparent;
transition:border-color .4s var(--ease)}
.brand:hover::after{border-color:var(--line)}
/* ---------- FOOTER POLISH ---------- */
.footer{position:relative}
.footer::before{content:"";position:absolute;inset:0 0 auto;height:1px;
background:linear-gradient(90deg,transparent,var(--wheat-400),transparent);opacity:.5}
.footer-word{position:absolute;left:50%;bottom:-2.5vw;transform:translateX(-50%);z-index:0;
pointer-events:none;font-family:var(--display);font-weight:600;font-size:15vw;line-height:.8;
color:transparent;-webkit-text-stroke:1px rgba(255,184,0,.07);white-space:nowrap;letter-spacing:-.04em}
.footer>*{position:relative;z-index:2}
.credit{display:inline-flex;align-items:center;gap:.45rem;transition:color .3s var(--ease)}
.credit a{color:var(--wheat-400);font-weight:700;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.credit a:hover{border-bottom-color:var(--wheat-400)}
.footer-verse{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1rem + .6vw,1.5rem);
color:var(--wheat-300);text-align:center;padding-block:clamp(1.5rem,3vw,2.5rem);
border-bottom:1px solid var(--line-soft)}
/* ---------- FACTS ON DONATE ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.5vw,1.25rem)}
@media (max-width:900px){.figs{grid-template-columns:repeat(2,1fr)}}
.fig{background:var(--paper-2);color:var(--on-paper);padding:clamp(1.25rem,2.5vw,2rem);border-top:4px solid var(--ember-500);
transition:transform .45s var(--ease)}
.fig:hover{transform:translateY(-6px)}
.fig b{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.03em;
font-size:clamp(1.9rem,1.3rem + 1.9vw,3rem);color:var(--wheat-400);line-height:1}
.fig span{display:block;margin-top:.5rem;font-size:.95rem;color:var(--muted);line-height:1.5}
/* ---------- NEVER LET A PHOTO GO SOFT ---------- */
.ph>img,.gal img,.pcar-slide img{image-rendering:auto}
.ph{background:linear-gradient(135deg,var(--ink-700),var(--ink-800))}
/* ==========================================================================
v10 — performance + corrections
========================================================================== */
/* don't lay out or paint sections that are far offscreen */
/* content-visibility is safe on photo bands, but NOT on anything containing a
column/grid gallery — it breaks height calculation and leaves dead space. */
.band,.pcar,.pmarq{content-visibility:auto;contain-intrinsic-size:auto 620px}
.hero,.header,.topbar,.phero{content-visibility:visible}
/* team photos are circles */
.tcard .ph,.team-card .ph{--ar:1/1;border-radius:50%;width:min(72%,240px);margin:1.5rem auto 0}
.tcard .ph::after,.team-card .ph::after{border-radius:50%}
.tcard .fx-brk::before,.tcard .fx-brk::after{display:none}
.tcard-body,.team-card .body-pad{text-align:center}
/* the two animations he did not want */
.water,.bible,.bible-wrap{display:none!important}
/* stat numbers were reading too small next to their labels */
.stat b{font-size:clamp(3.1rem,1.9rem + 3.4vw,5.6rem);line-height:.92;letter-spacing:-.035em}
.stat span{font-size:.92rem;letter-spacing:.1em}
.fig b{font-size:clamp(2.4rem,1.6rem + 2.4vw,3.8rem)}
.hero-strip b{font-size:clamp(2.2rem,1.5rem + 2vw,3.4rem)}
/* ==========================================================================
v11 — ALTERNATING LIGHT / DARK · PER-PAGE ACCENT
Light beige is the default surface. Dark carbon is punctuation.
========================================================================== */
:root{
--paper-1:#F7F2E7; /* beige */
--paper-2:#FFFDF7;
--carbon-1:#14110E;
--carbon-2:#1D1813;
--on-paper:#191510;
--on-carbon:#F9F5EC;
--accent:var(--ember-500);
--accent-soft:var(--wheat-400);
}
/* -- tone scopes: components read --fg/--muted, so both work everywhere -- */
.bg-ink{background:var(--paper-1);color:var(--on-paper)}
.bg-cream{background:var(--paper-2);color:var(--on-paper)}
.bg-ink-2,.bg-slate{background:var(--carbon-1);color:var(--on-carbon)}
.bg-ink,.bg-cream{
--fg:var(--on-paper);
--muted:rgba(25,21,16,.76);
--muted-2:rgba(25,21,16,.52);
--line-soft:rgba(25,21,16,.14);
--line:rgba(15,90,78,.30);
--ink-800:var(--paper-2);
--ink-700:#EDE3CF;
--cream-50:var(--on-paper);
}
.bg-ink-2,.bg-slate,.band,.hero,.phero,.story-stage{
--fg:var(--on-carbon);
--muted:rgba(249,245,236,.74);
--muted-2:rgba(249,245,236,.5);
--line-soft:rgba(249,245,236,.14);
--line:rgba(255,184,0,.32);
--ink-800:#221C16;
--ink-700:#2C251D;
--cream-50:var(--on-carbon);
}
.bg-ink .lead,.bg-cream .lead,.bg-ink .body,.bg-cream .body{color:var(--muted)}
.bg-ink .body strong,.bg-cream .body strong{color:var(--on-paper)}
.bg-ink .eyebrow,.bg-cream .eyebrow{color:var(--accent)}
.bg-ink .eyebrow::before,.bg-ink .eyebrow::after,
.bg-cream .eyebrow::before,.bg-cream .eyebrow::after{background:var(--accent)}
.bg-ink .stat,.bg-cream .stat{background:var(--paper-2)}
.bg-ink .stats,.bg-cream .stats{background:rgba(25,21,16,.12)}
.bg-ink .stat b,.bg-cream .stat b{color:var(--accent)}
.bg-ink .min-card,.bg-cream .min-card{background:var(--paper-2);border:1px solid rgba(25,21,16,.09)}
.bg-ink .min-card:hover,.bg-cream .min-card:hover{background:#fff;box-shadow:0 24px 56px -26px rgba(60,45,20,.42)}
.bg-ink .give-card,.bg-cream .give-card{background:var(--paper-2);border:1px solid rgba(25,21,16,.09)}
.bg-ink .tq,.bg-cream .tq{background:var(--paper-2);border:1px solid rgba(25,21,16,.09);border-left:6px solid var(--accent)}
.bg-ink .fig,.bg-cream .fig{background:var(--paper-2)}
.bg-ink .ledger,.bg-cream .ledger{background:var(--paper-2)}
.bg-ink .btn-ghost,.bg-cream .btn-ghost{border-color:var(--on-paper);color:var(--on-paper)}
.bg-ink .btn-ghost::before,.bg-cream .btn-ghost::before{background:var(--on-paper)}
.bg-ink .btn-ghost:hover,.bg-cream .btn-ghost:hover{color:var(--paper-1)}
.bg-ink .link,.bg-cream .link{color:var(--jade-500)}
.bg-ink .link::after,.bg-cream .link::after{background:var(--jade-500)}
.bg-ink .tcar-dots button,.bg-cream .tcar-dots button{background:rgba(25,21,16,.2)}
.bg-ink .tcar-btn,.bg-cream .tcar-btn{border-color:rgba(25,21,16,.18)}
.bg-ink .acc-q:hover,.bg-cream .acc-q:hover,
.bg-ink .acc-item.is-open .acc-q,.bg-cream .acc-item.is-open .acc-q{color:var(--jade-500)}
.bg-ink .pcar::before,.bg-cream .pcar::before{background:linear-gradient(90deg,var(--paper-1),transparent)}
.bg-ink .pcar::after,.bg-cream .pcar::after{background:linear-gradient(270deg,var(--paper-1),transparent)}
.bg-ink .ghost-no,.bg-cream .ghost-no{-webkit-text-stroke-color:rgba(15,90,78,.16)}
/* the green + red he asked to see more of */
.bar{background:var(--jade-500)}
.bar-ember{background:var(--ember-500)}
.bar-crimson{background:var(--crimson)}
.bar-wheat{background:var(--wheat-400);color:var(--carbon-1)}
.bg-ink .plate-dark,.bg-cream .plate-dark{background:var(--paper-2);border-left-color:var(--jade-500)}
.bg-ink .plate-dark q,.bg-cream .plate-dark q{color:var(--on-paper)}
.bg-ink .plate-dark cite,.bg-cream .plate-dark cite{color:var(--jade-500)}
.checks li::before{background:var(--jade-500)}
.min-no{background:var(--accent)}
/* -- per-page accent: set data-accent on -- */
[data-accent="water"] {--accent:#1E7FA8;--accent-soft:#5FC6E8}
[data-accent="film"] {--accent:#B3271F;--accent-soft:#FFB800}
[data-accent="christmas"] {--accent:#9E2B25;--accent-soft:#1FA98A}
[data-accent="palm"] {--accent:#0F5A4E;--accent-soft:#4FD6B4}
[data-accent="slavery"] {--accent:#8E1F18;--accent-soft:#FFB800}
[data-accent="sewing"] {--accent:#A8446B;--accent-soft:#FFD467}
[data-accent="bible"] {--accent:#8A5D00;--accent-soft:#FFD467}
[data-accent="bikes"] {--accent:#1E7FA8;--accent-soft:#FFB800}
[data-accent="relief"] {--accent:#C4622A;--accent-soft:#FFB800}
[data-accent="church"] {--accent:#0F5A4E;--accent-soft:#FFB800}
[data-accent="team"] {--accent:#0F5A4E;--accent-soft:#FFB800}
[data-accent="give"] {--accent:#E85D1F;--accent-soft:#FFB800}
.btn{background:var(--accent);border-color:var(--accent)}
.btn::before{background:var(--accent-soft)}
.eyebrow{color:var(--accent)}
.eyebrow::before,.eyebrow::after{background:var(--accent)}
.min-go{color:var(--accent)}
.qg-fab,.givebar{background:var(--accent)}
.givebar{border-top-color:var(--accent-soft)}
.footer{border-top-color:var(--accent)}
/* ==========================================================================
v12 — justified gallery + verse sticky notes
Equal-height rows, flush edges, no ragged column bottoms.
========================================================================== */
.jgal{display:flex;flex-wrap:wrap;gap:12px}
.jgal>*{
/* flex-grow by the photo's own aspect ratio => rows justify, nothing is cropped */
flex-grow:calc(var(--r) * 1000);
flex-basis:calc(var(--r) * 26rem);
height:auto;margin:0;position:relative;
}
.jgal>*::before{content:"";display:block;padding-bottom:calc(100% / var(--r))}
.jgal>* > img,.jgal .note-inner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jgal::after{content:"";flex-grow:999999999}
@media (max-width:700px){.jgal>*{flex-basis:calc(var(--r) * 16rem)}}
/* a verse on a sticky note, dropped into the grid where a gap falls */
.note{--r:1}
.note-inner{
display:flex;flex-direction:column;justify-content:center;gap:.7rem;
background:var(--wheat-300);color:var(--carbon-1,#14110E);
padding:clamp(1.1rem,2.2vw,1.9rem);
box-shadow:0 14px 30px -14px rgba(60,45,20,.55);
transform:rotate(-1.4deg);transition:transform .45s var(--ease);
}
.jgal .note:nth-child(4n) .note-inner{transform:rotate(1.6deg);background:var(--ember-300)}
.jgal .note:nth-child(6n) .note-inner{background:var(--jade-300)}
.note:hover .note-inner{transform:rotate(0) scale(1.02)}
.note q{font-family:var(--serif);font-style:italic;quotes:none;line-height:1.24;
font-size:clamp(1rem,.9rem + .7vw,1.45rem)}
.note cite{font-style:normal;font-weight:800;font-size:.78rem;letter-spacing:.14em;
text-transform:uppercase;opacity:.72}
.note::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-3deg);
width:74px;height:19px;background:rgba(249,245,236,.55);z-index:2}
/* ---- v13: a dark section owns its text colour outright ---- */
.bg-ink-2,.bg-slate,.band,.hero,.phero,.story-stage{color:var(--on-carbon)}
.bg-ink-2 .lead,.bg-slate .lead,.band .lead,.phero .lead,
.bg-ink-2 .body,.bg-slate .body,.band .body{color:rgba(249,245,236,.76)}
.bg-ink-2 .body strong,.band .body strong{color:var(--on-carbon)}
.band .stat,.bg-ink-2 .stat,.bg-slate .stat{background:rgba(20,17,14,.72);color:var(--on-carbon)}
.band .stat span,.bg-ink-2 .stat span,.bg-slate .stat span{color:rgba(249,245,236,.62)}
.band .stat b,.bg-ink-2 .stat b,.bg-slate .stat b{color:var(--accent-soft)}
.band .stats,.bg-ink-2 .stats{background:rgba(249,245,236,.16)}
.bg-ink-2 .tq,.bg-slate .tq{background:rgba(20,17,14,.7);color:var(--on-carbon)}
.bg-ink-2 .min-card,.bg-slate .min-card{background:rgba(20,17,14,.7);color:var(--on-carbon)}
.bg-ink-2 .give-card,.bg-slate .give-card{background:rgba(20,17,14,.7);color:var(--on-carbon)}
.bg-ink-2 .fact,.bg-slate .fact{background:rgba(20,17,14,.75);color:var(--on-carbon)}
/* ---------- v13: gallery batching ----------
.is-over is applied by the gallery script to figures beyond the current
batch. Kept out of the DOM's layout entirely, not merely invisible. */
.jgal>.is-over{display:none}
/* ---------- v13: live counters ---------- */
[data-live]{font-variant-numeric:tabular-nums}
[data-live].is-tick{animation:hhm-tick 1.1s var(--ease)}
@keyframes hhm-tick{
0%{color:var(--wheat-400);transform:translateY(-.12em)}
100%{color:inherit;transform:none}
}
.live-note{display:inline-flex;align-items:center;gap:.45rem;
font:700 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted-2)}
.live-note::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--jade-400);box-shadow:0 0 0 0 rgba(31,169,138,.6);
animation:hhm-pulse 2.4s infinite}
@keyframes hhm-pulse{
70%{box-shadow:0 0 0 9px rgba(31,169,138,0)}
100%{box-shadow:0 0 0 0 rgba(31,169,138,0)}
}
/* ══════════════════════════════════════════════════════════════════════════
v14 — HERITAGE ACCENTS
Added alongside the original palette, never replacing it. The beige paper and
the jade stay exactly as they were; these are extra tones for depth.
Set THEME = "heritage" in core5.py to bring them into play.
Original palette is backed up in Website/palette-backup/.
══════════════════════════════════════════════════════════════════════════ */
:root{
--navy-900:#1B2138; /* deep navy — the darkest of the new set */
--navy-700:#26355A; /* lighter navy blue */
--cream:#F2E8D5; /* warm cream, sits between the beige and white */
--camel:#D2A276; /* tan / camel */
--gold:#E8C56A; /* soft gold, quieter than the marigold */
}
[data-theme-accent="heritage"]{
--paper-2:var(--cream);
--accent-2:var(--camel);
--accent-3:var(--gold);
}
.bg-navy{background:var(--navy-900);color:var(--on-carbon)}
.bg-navy-2{background:var(--navy-700);color:var(--on-carbon)}
.bg-cream-warm{background:var(--cream);color:var(--on-paper)}
.rule-gold{border-color:var(--gold)}
.text-camel{color:var(--camel)}
.text-gold{color:var(--gold)}
.bar-navy{background:var(--navy-900);color:var(--cream)}
.bar-camel{background:var(--camel);color:var(--carbon-1)}
.bar-gold{background:var(--gold);color:var(--carbon-1)}
/* ══════════════════════════════════════════════════════════════════════════
v14 — the accent face.
Caveat (a casual marker hand) is replaced by Cormorant Garamond in italic:
high-contrast, old-style, and it sits properly beside Newsreader instead of
fighting it. Letterspaced slightly so it reads as a considered flourish
rather than a handwritten note.
══════════════════════════════════════════════════════════════════════════ */
:root{--script:'Cormorant Garamond',Georgia,'Times New Roman',serif}
.script,.lp-hand,.note cite,.topbar .v,.verse .ref,
.tcard .role,.team-card span,.lp-pola-n{
font-family:var(--script);font-style:italic;font-weight:600;
letter-spacing:.005em;text-transform:none;
}
.lp-hand{font-size:1.6rem;letter-spacing:.01em}
.topbar .v{font-size:1.15rem}
.tcard .role,.team-card span{font-size:1.25rem;letter-spacing:.01em}
.lp-pola-n{font-style:normal;font-weight:600}
/* ══════════════════════════════════════════════════════════════════════════
v14 — the sticky give bar is now donate-page only.
It was following the reader down every page, which the client found
distracting. .has-givebar is set on by the builder, and only the
donate page gets it.
══════════════════════════════════════════════════════════════════════════ */
body:not(.has-givebar) .givebar{display:none!important}
body:not(.has-givebar) .give-rail{display:none!important}
/* ══════════════════════════════════════════════════════════════════════════
v14 — PRAYER REQUEST FORM
══════════════════════════════════════════════════════════════════════════ */
.prayer-form{background:var(--paper-2);color:var(--on-paper);
padding:clamp(1.5rem,3.4vw,2.6rem);border-top:4px solid var(--jade-500)}
.prayer-form .field{margin-bottom:1.15rem}
.prayer-form label{display:block;font:700 .78rem/1 var(--sans);letter-spacing:.13em;
text-transform:uppercase;color:rgba(25,21,16,.66);margin-bottom:.5rem}
.prayer-form label .opt{font-weight:600;letter-spacing:.04em;text-transform:none;
color:rgba(25,21,16,.42);font-size:.82rem;margin-left:.4rem}
.prayer-form input[type=text],.prayer-form select,.prayer-form textarea{
width:100%;padding:.85rem 1rem;border:1px solid rgba(25,21,16,.2);border-radius:2px;
background:#fff;color:var(--on-paper);font-family:var(--sans);font-size:1rem;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.prayer-form textarea{resize:vertical;min-height:9rem;line-height:1.6}
.prayer-form input:focus,.prayer-form select:focus,.prayer-form textarea:focus{
outline:0;border-color:var(--jade-500);box-shadow:0 0 0 3px rgba(15,90,78,.14)}
.prayer-form .err{margin-top:.5rem;color:var(--crimson);font-size:.9rem;font-weight:600}
.check-inline{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
font-size:.95rem;line-height:1.5;color:rgba(25,21,16,.78);text-transform:none;
letter-spacing:0;font-weight:400}
.check-inline input{margin-top:.28rem;width:17px;height:17px;accent-color:var(--jade-500);flex:none}
.prayer-aside{background:var(--paper-2);color:var(--on-paper);
padding:clamp(1.2rem,2.6vw,1.9rem);border-left:4px solid var(--camel)}
.prayer-aside h3{font-family:var(--display);font-weight:600;font-size:1.2rem;
letter-spacing:-.015em;margin-bottom:.7rem}
.prayer-aside ol{list-style:none;counter-reset:pr;margin:0;padding:0}
.prayer-aside ol li{counter-increment:pr;position:relative;padding-left:2rem;
margin-bottom:.7rem;font-size:.95rem;line-height:1.55;color:rgba(25,21,16,.76)}
.prayer-aside ol li::before{content:counter(pr,decimal-leading-zero);position:absolute;left:0;top:.05em;
font:700 .78rem/1.5 var(--sans);color:var(--jade-500);letter-spacing:.04em}
.prayer-aside p{font-size:.95rem;line-height:1.55;color:rgba(25,21,16,.76)}
@media (max-width:860px){.prayer-form{padding:1.3rem}}
/* ══════════════════════════════════════════════════════════════════════════
v14 — scripture cards that close a ragged grid row.
A 3-column grid holding 8 photographs left an empty cell, which rendered as
an unexplained pale box. The gap is now filled rather than left open.
══════════════════════════════════════════════════════════════════════════ */
.gal-verse{position:relative;overflow:hidden;background:var(--jade-500);color:var(--cream-50);
cursor:default;aspect-ratio:3/2}
.gal-verse:nth-child(even){background:var(--carbon-1)}
.gal-verse .gal-verse-in{position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:center;gap:.8rem;padding:clamp(1.1rem,2.4vw,2rem);text-align:left}
.gal-verse q{font-family:var(--serif);font-style:italic;quotes:none;line-height:1.3;
color:#fff;font-size:clamp(1rem,.9rem + .55vw,1.35rem)}
.gal-verse cite{font-style:normal;font-family:var(--sans);font-weight:800;font-size:.72rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--wheat-400)}
.gal-verse::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:var(--wheat-400)}
.gal-verse:hover{transform:none}
/* ══════════════════════════════════════════════════════════════════════════
v14 — button rows must not overlap.
.row was a plain flex with no wrapping, so three buttons in a narrow column
sat on top of one another. This is the "three buttons overlapping" defect on
the motorbikes page; the rule is global because the same .row is everywhere.
══════════════════════════════════════════════════════════════════════════ */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;min-width:0}
.row>*{flex:0 1 auto;min-width:0;max-width:100%}
.row .btn{white-space:normal;text-align:center}
@media (max-width:560px){
.row{flex-direction:column;align-items:stretch}
.row .btn,.row .link{width:100%;justify-content:center}
}
/* ══════════════════════════════════════════════════════════════════════════
v15 — team portraits at full colour.
.fx-grade desaturates to .72 and drops brightness to .9. On a ministry
photograph that reads as a film grade; on a studio portrait shot against an
orange gradient it just reads as dull, which is what the client saw.
══════════════════════════════════════════════════════════════════════════ */
.tcard .ph>img,.team-card .ph>img,.tcard .fx-grade>img,.team-card .fx-grade>img{
filter:none}
.tcard .ph:hover>img,.team-card .ph:hover>img{filter:none;transform:scale(1.03)}
.tcard .ph,.team-card .ph{
box-shadow:0 18px 40px -20px rgba(40,28,10,.45);
transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tcard:hover .ph,.team-card:hover .ph{
transform:translateY(-4px);box-shadow:0 26px 52px -22px rgba(40,28,10,.55)}
/* ══════════════════════════════════════════════════════════════════════════
v15 — CHURCH DOORS
The church page opens with its doors swinging apart. Pure CSS, runs once,
sits above everything until it has finished and then removes itself from the
layer entirely so it can never intercept a click.
══════════════════════════════════════════════════════════════════════════ */
.doors{position:fixed;inset:0;z-index:290;pointer-events:none;overflow:hidden;
animation:doors-clear 0s 2.5s forwards}
.doors i{position:absolute;top:0;bottom:0;width:50.5%;background:var(--carbon-1);
border-inline:1px solid rgba(255,184,0,.22);
display:block;transform-origin:left center}
.doors i:first-child{left:0;transform-origin:left center;
animation:door-l 1.5s .35s var(--ease) forwards}
.doors i:last-child{right:0;transform-origin:right center;
animation:door-r 1.5s .35s var(--ease) forwards}
.doors i::after{content:"";position:absolute;top:50%;width:12px;height:52px;
border-radius:6px;background:var(--wheat-400);transform:translateY(-50%);
box-shadow:0 0 18px rgba(255,184,0,.45)}
.doors i:first-child::after{right:14px}
.doors i:last-child::after{left:14px}
.doors b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
font-family:var(--display);font-style:italic;font-weight:500;
font-size:clamp(1.2rem,3vw,2.1rem);color:var(--wheat-300);white-space:nowrap;
animation:door-word 1.1s .1s var(--ease) forwards}
@keyframes door-l{to{transform:perspective(1400px) rotateY(-105deg)}}
@keyframes door-r{to{transform:perspective(1400px) rotateY(105deg)}}
@keyframes door-word{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes doors-clear{to{display:none}}
@media (prefers-reduced-motion:reduce){.doors{display:none}}
.no-js .doors{display:none}
/* ══════════════════════════════════════════════════════════════════════════
v15 — DONATE: everything above the fold
PayPal, the full bank details and the QR code, before a single scroll.
══════════════════════════════════════════════════════════════════════════ */
.give-top{padding-block:clamp(1.6rem,3.4vw,2.6rem)}
.give-top-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.8fr);
gap:clamp(1rem,2.2vw,1.6rem);align-items:stretch}
@media (max-width:980px){.give-top-grid{grid-template-columns:1fr 1fr}
.give-panel-qr{grid-column:1/-1}}
@media (max-width:620px){.give-top-grid{grid-template-columns:1fr}}
.give-panel{background:var(--paper-2);color:var(--on-paper);border-radius:3px;
padding:clamp(1.2rem,2.4vw,1.7rem);border-top:4px solid var(--ember-500);
display:flex;flex-direction:column}
.give-panel-bank{border-top-color:var(--jade-500)}
.give-panel-qr{border-top-color:var(--wheat-400);align-items:center;text-align:center}
.give-panel .k{font:800 .66rem/1.35 var(--sans);letter-spacing:.15em;text-transform:uppercase;
color:rgba(25,21,16,.5)}
.give-panel h3{font-family:var(--display);font-weight:600;font-size:1.42rem;
letter-spacing:-.02em;margin-top:.35rem}
.give-panel .small{font-size:.88rem;line-height:1.5;color:rgba(25,21,16,.68)}
.give-panel a{color:var(--jade-500);font-weight:600;word-break:break-all}
.give-panel-qr img{width:min(190px,100%);height:auto;border-radius:2px;margin-top:.7rem}
.give-bank{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.9rem}
.give-bank th,.give-bank td{text-align:left;padding:.45rem 0;vertical-align:top;
border-bottom:1px dashed rgba(25,21,16,.16)}
.give-bank th{font:700 .74rem/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;
color:rgba(25,21,16,.52);width:38%;padding-right:.8rem}
.give-bank td{font-weight:600;word-break:break-all}
.give-bank tr:last-child th,.give-bank tr:last-child td{border-bottom:0}
.give-bank .copy-btn{margin-left:.5rem;font:700 .66rem/1 var(--sans);letter-spacing:.08em;
text-transform:uppercase;padding:.28rem .55rem;border:1px solid rgba(25,21,16,.22);
border-radius:2px;color:rgba(25,21,16,.6);background:transparent;cursor:pointer;
transition:.22s var(--ease)}
.give-bank .copy-btn:hover{background:var(--jade-500);border-color:var(--jade-500);color:#fff}
/* ══════════════════════════════════════════════════════════════════════════
v15 — ABOUT: mission rows, vision list, statement of faith
══════════════════════════════════════════════════════════════════════════ */
.mv-list{border-top:1px solid rgba(25,21,16,.16)}
.mv-row{display:grid;grid-template-columns:minmax(7rem,11rem) minmax(0,1fr);
gap:clamp(.8rem,2.4vw,2.4rem);align-items:baseline;
padding:clamp(.9rem,2vw,1.4rem) 0;border-bottom:1px solid rgba(25,21,16,.16);
transition:background .35s var(--ease)}
.mv-row:hover{background:rgba(255,253,247,.7)}
.mv-row b{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1;
font-size:clamp(1.5rem,1rem + 1.5vw,2.3rem);color:var(--jade-500)}
.mv-row span{color:rgba(25,21,16,.72);font-size:1rem;line-height:1.55}
@media (max-width:640px){.mv-row{grid-template-columns:1fr;gap:.2rem}}
.vision-list{list-style:none;margin:0;padding:0;counter-reset:v}
.vision-list li{display:flex;gap:1rem;align-items:baseline;padding:.75rem 0;
border-bottom:1px solid rgba(249,245,236,.14);font-size:1.05rem;line-height:1.5}
.vision-list li:last-child{border-bottom:0}
.vision-list li i{font-style:normal;font:800 .72rem/1.6 var(--sans);letter-spacing:.08em;
color:var(--wheat-400);flex:none}
.faith-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media (max-width:820px){.faith-grid{grid-template-columns:1fr}}
.faith-item{display:flex;gap:1rem;align-items:flex-start;
padding:clamp(1.1rem,2.2vw,1.5rem);background:var(--paper-2);color:var(--on-paper);
border-left:3px solid var(--jade-500);border-radius:2px}
.faith-item .n{font:800 .78rem/1.4 var(--sans);letter-spacing:.06em;color:var(--jade-500);flex:none}
.faith-item h3{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.015em}
.faith-item p{margin-top:.35rem;font-size:.95rem;line-height:1.6;color:rgba(25,21,16,.72)}
.church-quote{background:var(--jade-500);color:#fff;padding:clamp(1.3rem,3vw,2.2rem);
border-radius:3px;display:flex;flex-direction:column;gap:.7rem;align-items:center;
text-align:center}
.church-quote q{font-family:var(--serif);font-style:italic;quotes:none;
font-size:clamp(1.1rem,1rem + .8vw,1.7rem);line-height:1.3;max-width:46ch}
.church-quote cite{font-style:normal;font:800 .72rem/1 var(--sans);letter-spacing:.16em;
text-transform:uppercase;color:var(--wheat-400)}
/* ══════════════════════════════════════════════════════════════════════════
v16 — THE GALLERY AS A MUSEUM WALL
----------------------------------------------------------------------------
Two problems with the old grid: the frames were enormous (flex-basis of
26rem × ratio, so a 3:2 photograph asked for 39rem) and the thumbnails are
340px, so every one of them was being blown up and went soft. Smaller frames
fix the blur and the wall at the same time.
Each photograph is now a hung print: a dark frame, a cream mat, a shadow that
falls down and right as though lit from above left, a hanging wire, and a
brass label plate. Rows still justify, so the hang reads as deliberate.
══════════════════════════════════════════════════════════════════════════ */
.museum{
position:relative;
background:
radial-gradient(140% 100% at 50% 0,rgba(255,253,247,.55),transparent 60%),
linear-gradient(180deg,#EFE7D6,#E4DAC5);
padding:clamp(2rem,5vw,4.5rem) clamp(1rem,3vw,3rem) clamp(3rem,6vw,5rem);
border-radius:2px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -30px 60px -30px rgba(60,45,20,.28);
}
/* the plaster */
.museum::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;border-radius:inherit;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E");
mix-blend-mode:multiply;
}
/* the picture rail */
.museum::after{
content:"";position:absolute;left:0;right:0;top:clamp(1.1rem,2.6vw,2.2rem);height:6px;
background:linear-gradient(180deg,#C9B896,#9E8A66);
box-shadow:0 3px 7px rgba(60,45,20,.3);
}
.museum .jgal{position:relative;z-index:1;gap:clamp(1.4rem,2.8vw,2.6rem) clamp(1rem,2vw,1.8rem);
align-items:flex-start}
/* the key number: 14rem, not 26rem — a 3:2 print now lands near 300px wide,
which is inside the 340px thumbnail and therefore sharp */
.museum .jgal>*{flex-basis:calc(var(--r) * 14rem);flex-grow:calc(var(--r) * 1000)}
@media (max-width:700px){.museum .jgal>*{flex-basis:calc(var(--r) * 10rem)}}
.museum .gal{
background:#FFFDF7;
padding:clamp(9px,1vw,15px) clamp(9px,1vw,15px) clamp(26px,2.4vw,38px);
border:1px solid rgba(60,45,20,.22);
border-radius:1px;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 2px 3px rgba(60,45,20,.18),
0 16px 26px -14px rgba(60,45,20,.42);
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
overflow:visible;
}
/* the frame moulding */
.museum .gal::before{
content:"";position:absolute;inset:0;border-radius:1px;pointer-events:none;z-index:3;
border:clamp(4px,.5vw,7px) solid var(--carbon-1);
box-shadow:inset 0 0 0 1px rgba(255,184,0,.35);
}
/* the hanging wire and nail */
.museum .gal::after{
content:"";position:absolute;left:50%;top:calc(-1 * clamp(10px,1.6vw,18px));
width:1px;height:clamp(10px,1.6vw,18px);
background:rgba(60,45,20,.5);transform:translateX(-50%);opacity:1;z-index:0;
}
.museum .gal>img{
position:static;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;
display:block;border-radius:0;filter:none;transition:transform .6s var(--ease);
}
.museum .gal:hover{transform:translateY(-5px) rotate(-.35deg);
box-shadow:0 3px 5px rgba(60,45,20,.2),0 30px 46px -18px rgba(60,45,20,.5)}
.museum .gal:hover>img{transform:none}
/* brass label plate */
.museum .gal figcaption{
position:absolute;left:50%;bottom:clamp(5px,.7vw,9px);transform:translateX(-50%);
opacity:1;z-index:4;max-width:calc(100% - 22px);
padding:.2rem .55rem;border-radius:1px;
background:linear-gradient(180deg,#D9C79C,#BFA878);
color:#2A2113;
font:800 .58rem/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
box-shadow:0 1px 2px rgba(60,45,20,.35);
}
.museum .gal:hover figcaption{opacity:1;transform:translateX(-50%)}
/* the verse cards become wall texts, as a museum would hang them */
.museum .note .note-inner{background:#FFFDF7;color:var(--carbon-1);
border:1px solid rgba(60,45,20,.22);
box-shadow:0 2px 3px rgba(60,45,20,.18),0 16px 26px -14px rgba(60,45,20,.42)}
.museum .note::after{display:none}
/* the room caption above the wall */
.museum-plate{max-width:62ch;margin:0 auto clamp(1.6rem,3vw,2.6rem);text-align:center;
position:relative;z-index:1}
.museum-plate h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em;
font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);color:var(--carbon-1)}
.museum-plate p{margin-top:.6rem;color:rgba(25,21,16,.66);font-size:.98rem;line-height:1.6}
/* ══════════════════════════════════════════════════════════════════════════
v16 — PER-PAGE IDENTITY
----------------------------------------------------------------------------
Every page already carries data-accent on . Until now that only changed
the button colour. Each ministry now gets a motif as well — a faint pattern
painted into its light sections — so Christmas does not look like Clean Water
with different buttons.
The motifs are inline SVG data URIs at very low opacity. No extra requests,
nothing to load, and they sit behind content with pointer-events off.
══════════════════════════════════════════════════════════════════════════ */
.bg-ink,.bg-cream{position:relative;isolation:isolate}
.bg-ink::before,.bg-cream::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--motif,none);background-size:var(--motif-size,180px);
opacity:var(--motif-opacity,.05)}
/* ── Christmas · deep red and gold, with stars and a subtle snowfall ─────── */
[data-accent="christmas"]{--accent:#9E2B25;--accent-soft:#E8C56A}
[data-accent="christmas"] .bg-ink{background:#FBF3E9}
[data-accent="christmas"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%239E2B25' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M30 12v24M18 24h24M24 18l12 12M36 18L24 30'/%3E%3Cpath d='M90 72v20M81 82h18M85 77l10 10M95 77l-10 10'/%3E%3C/g%3E%3Ccircle cx='96' cy='24' r='2.6' fill='%23E8C56A'/%3E%3Ccircle cx='20' cy='96' r='2.2' fill='%23E8C56A'/%3E%3C/svg%3E");
--motif-opacity:.07;--motif-size:150px}
[data-accent="christmas"] .dsp{letter-spacing:-.03em}
[data-accent="christmas"] .bar-ember{background:#9E2B25}
[data-accent="christmas"] .kicker,[data-accent="christmas"] .eyebrow{color:#9E2B25}
[data-accent="christmas"] .checks li::before{background:#9E2B25}
[data-accent="christmas"] .phero::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(158,43,37,.18),transparent 55%)}
/* ── Clean Water · aqua, with a ripple ──────────────────────────────────── */
[data-accent="water"]{--accent:#1E7FA8;--accent-soft:#5FC6E8}
[data-accent="water"] .bg-ink{background:#EFF6F8}
[data-accent="water"] .bg-cream{background:#F7FCFD}
[data-accent="water"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='90'%3E%3Cg fill='none' stroke='%231E7FA8' stroke-width='1.5'%3E%3Cpath d='M0 22q25-14 50 0t50 0 50 0 50 0'/%3E%3Cpath d='M0 46q25-14 50 0t50 0 50 0 50 0'/%3E%3Cpath d='M0 70q25-14 50 0t50 0 50 0 50 0'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.09;--motif-size:200px 90px}
[data-accent="water"] .bar-ember{background:#1E7FA8}
[data-accent="water"] .bar-jade{background:#0E6E92}
[data-accent="water"] .checks li::before{background:#1E7FA8}
[data-accent="water"] .lp-verse,[data-accent="water"] .plate-jade{border-left-color:#1E7FA8}
/* ── Jesus Film · cinema. Sprocket holes down the edge of light sections ── */
[data-accent="film"]{--accent:#B3271F;--accent-soft:#FFB800}
[data-accent="film"] .bg-ink{background:#F4F1EC}
[data-accent="film"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='120'%3E%3Cg fill='%23141110'%3E%3Crect x='8' y='14' width='14' height='20' rx='3'/%3E%3Crect x='8' y='58' width='14' height='20' rx='3'/%3E%3Crect x='8' y='102' width='14' height='20' rx='3'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.05;--motif-size:60px 120px}
[data-accent="film"] .bg-ink::before{background-repeat:repeat-y;background-position:left top}
/* ── Sewing · rose, with a running stitch ───────────────────────────────── */
[data-accent="sewing"]{--accent:#A8446B;--accent-soft:#E8C56A}
[data-accent="sewing"] .bg-ink{background:#FAF2F5}
[data-accent="sewing"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg stroke='%23A8446B' stroke-width='2' stroke-linecap='round' stroke-dasharray='9 11'%3E%3Cpath d='M0 35h140M0 105h140'/%3E%3Cpath d='M35 0v140M105 0v140'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.07}
[data-accent="sewing"] .bar-ember{background:#A8446B}
[data-accent="sewing"] .checks li::before{background:#A8446B}
/* ── Brick kilns / slavery · crimson, with brick coursing ───────────────── */
[data-accent="slavery"]{--accent:#8E1F18;--accent-soft:#FFB800}
[data-accent="slavery"] .bg-ink{background:#F6F0E9}
[data-accent="slavery"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%238E1F18' stroke-width='1.3'%3E%3Crect x='.5' y='.5' width='59' height='29'/%3E%3Crect x='60.5' y='.5' width='59' height='29'/%3E%3Crect x='-29.5' y='30.5' width='59' height='29'/%3E%3Crect x='30.5' y='30.5' width='59' height='29'/%3E%3Crect x='90.5' y='30.5' width='59' height='29'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.055;--motif-size:120px 60px}
/* ── Palm Sunday / preaching · jade, with fronds ────────────────────────── */
[data-accent="palm"]{--accent:#0F5A4E;--accent-soft:#4FD6B4}
[data-accent="palm"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%230F5A4E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M40 130V60M40 60C28 40 14 32 2 34c6 14 22 24 38 26zM40 60c8-20 22-30 36-28-6 14-20 24-36 28z'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.055}
/* ── Bible · warm gold, with an open-book rule ──────────────────────────── */
[data-accent="bible"]{--accent:#8A5D00;--accent-soft:#FFD467}
[data-accent="bible"] .bg-ink{background:#FAF5EA}
[data-accent="bible"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%238A5D00' stroke-width='1.3'%3E%3Cpath d='M20 90V34c14-6 30-6 40 2v56c-10-8-26-8-40-2z'/%3E%3Cpath d='M140 90V34c-14-6-30-6-40 2v56c10-8 26-8 40-2z'/%3E%3Cpath d='M80 36v56'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.05;--motif-size:160px 120px}
/* ── Relief / ration · ember, with wheat ────────────────────────────────── */
[data-accent="relief"]{--accent:#C4622A;--accent-soft:#FFB800}
[data-accent="relief"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23C4622A' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M60 105V45M60 45c0-12-9-18-9-27 0 0 9 3 9 12 0-9 9-12 9-12 0 9-9 15-9 27zM60 63c-3-9-12-12-12-21 0 0 12 3 12 15zM60 81c3-9 12-12 12-21 0 0-12 3-12 15z'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.05}
/* ── Church · jade and gold, with an arch ───────────────────────────────── */
[data-accent="church"]{--accent:#0F5A4E;--accent-soft:#FFB800}
[data-accent="church"]{
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140'%3E%3Cg fill='none' stroke='%230F5A4E' stroke-width='1.4'%3E%3Cpath d='M35 130V70a25 25 0 0150 0v60z'/%3E%3Cpath d='M60 45V22M50 32h20'/%3E%3C/g%3E%3C/svg%3E");
--motif-opacity:.05;--motif-size:120px 140px}
/* motion is decoration — never let it cost anything on a slow phone */
@media (max-width:640px){
.bg-ink::before,.bg-cream::before{opacity:calc(var(--motif-opacity,.05) * .6)}
}
/* ══════════════════════════════════════════════════════════════════════════
v16 — MOBILE PASS
----------------------------------------------------------------------------
Most of this audience is on a phone, often a modest one on a slow connection.
Everything below is about that reader: reachable tap targets, type that does
not shrink into nothing, grids that actually collapse, and no horizontal
scroll anywhere.
══════════════════════════════════════════════════════════════════════════ */
/* nothing may push the page sideways — the commonest mobile defect there is */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,table,pre{max-width:100%}
@media (max-width:760px){
/* ── tap targets. 44px is the accessibility floor; several controls were under it */
.btn{min-height:48px;padding:.95rem 1.4rem;font-size:.86rem}
.btn-lg{min-height:54px;padding:1.05rem 1.6rem;font-size:.9rem}
.btn-sm{min-height:44px}
.filter{min-height:44px;padding:.7rem 1.05rem}
.burger{width:48px;height:48px}
.acc-q{min-height:52px;padding-block:1rem}
.copy-btn{min-height:36px;padding:.45rem .7rem}
.lp-chip,.lp-amt{min-height:52px}
.qg-fab{min-height:52px}
.drawer nav a{min-height:50px;display:flex;align-items:center}
.lp-more a,.lp-step{min-height:44px;display:inline-flex;align-items:center}
/* ── type. Display sizes were clamping down far enough to lose their weight */
.d1{font-size:clamp(2.15rem,7.2vw,3rem)}
.d2{font-size:clamp(1.85rem,6.2vw,2.5rem)}
.d3{font-size:clamp(1.55rem,5.2vw,2rem)}
body{font-size:1.02rem;line-height:1.66}
.lead{font-size:1.04rem;line-height:1.6}
.body p{font-size:1rem}
/* ── every multi-column grid collapses; several had no small breakpoint */
.grid.g2,.grid.g3,.grid.g4,
.grid.g-6-6,.grid.g-7-5,.grid.g-5-7{grid-template-columns:1fr!important}
.facts,.figs,.give-grid,.faith-grid{grid-template-columns:1fr!important}
.stats{grid-template-columns:1fr 1fr!important}
.footer-grid{grid-template-columns:1fr!important;gap:2rem}
/* ── the museum wall reads as two hung prints per row, not one giant one */
.museum{padding:clamp(1.2rem,4vw,2rem) .75rem 2rem;border-radius:0}
.museum::after{display:none} /* the picture rail is desktop dressing */
.museum .jgal{gap:1rem .7rem}
.museum .gal{padding:6px 6px 22px}
.museum .gal figcaption{font-size:.5rem;letter-spacing:.06em;padding:.15rem .35rem}
/* ── tables scroll rather than squash */
.ledger table,.give-bank{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.give-bank th{width:auto;white-space:nowrap}
/* ── compare sliders need a bigger handle on a thumb */
.cmp{cursor:grab}
.cmp-handle::after{width:46px;height:46px;font-size:1.2rem}
.cmp-tag{font-size:.62rem;padding:.35rem .55rem;top:.6rem}
.cmp-tag.l{left:.6rem} .cmp-tag.r{right:.6rem}
.cmp-note{display:none}
/* ── section rhythm. Desktop padding on a phone is a lot of empty scrolling */
.section{padding-block:clamp(2.6rem,9vw,3.6rem)}
.section-sm{padding-block:clamp(2rem,7vw,2.8rem)}
/* ── the giant outlined wordmark was overflowing the footer */
.footer-word{font-size:18vw;overflow:hidden}
.lp-ghost{font-size:22vw}
}
@media (max-width:480px){
.museum .jgal>*{flex-basis:calc(var(--r) * 8.5rem)}
.stats{grid-template-columns:1fr!important}
.d1{font-size:clamp(2rem,8.5vw,2.6rem)}
/* headline line-breaks written for desktop become odd here */
.dsp br{display:none}
.dsp .bar{margin-top:.15em}
}
/* honour the iPhone notch and the home indicator */
@supports(padding:max(0px)){
.header .wrap-wide,.topbar .wrap-wide,.footer .wrap-wide{
padding-left:max(var(--gut),env(safe-area-inset-left));
padding-right:max(var(--gut),env(safe-area-inset-right))}
.givebar{padding-bottom:env(safe-area-inset-bottom)}
}
/* ══════════════════════════════════════════════════════════════════════════
v17 — THE SCROLL STUTTER, part 1 of 2
----------------------------------------------------------------------------
.header is position:sticky AND carries backdrop-filter:blur(16px). That is
the single most expensive thing you can ask of a compositor during a scroll:
every frame the browser must re-sample and re-blur the strip of page behind
the header. A mouse wheel fires many small scroll steps, so it re-blurs many
times a second and you feel it as stutter. Dragging the scrollbar produces
fewer, larger steps — which is precisely why that felt smooth.
The blur is replaced with a solid translucent panel. It looks near-identical
over a dark page and costs nothing to scroll past.
══════════════════════════════════════════════════════════════════════════ */
.header{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
background:rgba(16,14,12,.94);
}
.header.is-stuck{background:rgba(16,14,12,.985)}
/* the progress bar is now driven by transform, not width — see hhm.js */
.progress{transform-origin:left center;transform:scaleX(0);width:100%!important;
will-change:transform}
/* Chrome applies smooth scrolling to anchor jumps AND, with some mice, to wheel
input. Keep it for in-page links only, not for the document. */
html{scroll-behavior:auto}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
/* the other per-frame cost: any element still asking for a permanent GPU layer */
.band-media img,.phero-media img{will-change:auto}
@media (pointer:coarse),(max-width:900px){
.band-media img,.phero-media img,[data-px]{transform:none!important}
}
/* ══════════════════════════════════════════════════════════════════════════
v18 — THE BIG WHITE BOX UNDER EVERY GALLERY PHOTO. My bug.
----------------------------------------------------------------------------
.jgal reserves each cell's height with a ::before spacer:
.jgal>*::before{padding-bottom:calc(100% / var(--r))}
and the original design then laid the ![]()
absolutely on top of that spacer.
When I restyled the gallery as framed prints I set the image to position:
static so it could sit inside the mat — but I left the spacer in place. So
every cell became spacer-height PLUS image-height, and the spacer rendered as
an empty box the exact size of the photograph sitting right under it.
Landscape photos looked worst because their spacer is widest.
The spacer is not needed once the image is in normal flow and carries its own
aspect-ratio, so in museum mode it goes.
══════════════════════════════════════════════════════════════════════════ */
.museum .jgal>*::before{display:none!important}
.museum .jgal>*{height:auto}
/* the verse cards were absolutely positioned against the same spacer */
.museum .note{display:flex}
.museum .note .note-inner{position:static;width:100%;height:auto;
min-height:0;aspect-ratio:3/2;display:flex}
/* ══════════════════════════════════════════════════════════════════════════
v18 — SCROLL COST, second pass.
mix-blend-mode forces the compositor to re-read what is underneath every
time the area moves. On full-width section backgrounds that is the whole
viewport, every frame of a scroll. Plain opacity gets the same look for
nothing.
══════════════════════════════════════════════════════════════════════════ */
.lp-wash.tone-paper img,.lp-wash.tone-carbon img{mix-blend-mode:normal}
.lp-wash.tone-paper img{opacity:.07}
.lp-wash.tone-carbon img{opacity:.14}
.museum::before{mix-blend-mode:normal;opacity:.28}
/* CSS filters on forty large photographs per page make the GPU re-rasterise
those layers during a scroll. The grade is a nicety; scrolling is not. */
.fx-grade>img{filter:none}
.fx-grade:hover>img{filter:saturate(1.05) contrast(1.02)}
@media (pointer:coarse){.fx-grade:hover>img{filter:none;transform:none}}
/* ══════════════════════════════════════════════════════════════════════════
v19 — THE GREY VOID UNDER A PHOTO IN A GRID. The same bug, third location.
----------------------------------------------------------------------------
Grid items stretch to the height of the tallest cell in their row by default.
.gal is the grid item; the ![]()
inside it is width:100%, height:auto. So put
one portrait photograph next to a landscape one and the landscape figure
stretches to the portrait's height while its image does not — leaving a tall
empty strip inside the figure. And because .gal::after (the caption gradient)
and figcaption are positioned against the FIGURE rather than the image, both
render into that empty strip: a grey fade with a caption floating in nothing.
That is what the client photographed. align-self:start stops the figure ever
growing past its own image, everywhere on the site at once.
══════════════════════════════════════════════════════════════════════════ */
.grid>.gal,.grid>.note,.jgal>.gal{align-self:start}
.grid>.gal>img{display:block;width:100%;height:auto}
/* and the gradient/caption now have nothing to fall into, but belt and braces: */
.gal::after{bottom:0;top:auto;height:60%}
/* ══════════════════════════════════════════════════════════════════════════
v20 — INVISIBLE TEXT ON THE DONATE PAGE. The §5 rule, broken again.
----------------------------------------------------------------------------
.fig paints a cream card (--paper-2) but takes its label colour from --muted.
Inside a dark section --muted is remapped to cream, so the label was cream on
cream and simply vanished. The impact list had the mirror-image fault: a dark
panel taking dark text from --muted inside a light section.
Both now state their own colours outright rather than inheriting one that
changes meaning depending on where the component happens to sit.
══════════════════════════════════════════════════════════════════════════ */
.fig{background:var(--paper-2)!important;color:var(--on-paper)!important}
.fig b{color:var(--ember-500)!important}
.fig span{color:rgba(25,21,16,.7)!important}
.fig cite{color:rgba(25,21,16,.5)!important}
.impact,.impact-panel{background:var(--carbon-1)!important;color:var(--on-carbon)!important}
.impact-list li{color:rgba(249,245,236,.82)!important;
border-bottom-color:rgba(249,245,236,.14)!important}
.impact-list li b{color:var(--wheat-400)!important}
.impact-amt{color:var(--wheat-400)!important}
.impact a,.impact-panel a{color:var(--wheat-300)!important}
/* the slider track and thumb had no contrast against the panel either */
input[type=range]{accent-color:var(--ember-500)}
/* Longer, more specific button labels — allow a wrap on narrow screens
instead of overflowing the viewport. Added with the 2026 copy pass. */
@media (max-width:520px){
.btn{white-space:normal;text-align:center;line-height:1.25;padding-inline:1.35rem}
.btn-lg{font-size:.82rem;letter-spacing:.09em}
}