/* ==========================================================================
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,.58);
--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.
══════════════════════════════════════════════════════════════════════════ */
/* THE "PAGE LOADS HALF BLACK" BUG.
The comment directly above says will-change was removed. It was not — it was
still declared here, on every un-revealed element. church.html has 49 of
them, index.html 63. That asks the compositor to allocate that many GPU
layers before a single pixel has been painted.
On a 1440px laptop the GPU absorbs it. On the client's ultra-wide monitor
each layer is ~1.8x the pixels, the allocation blows past the tile budget
during first paint, and the browser ships a frame with whole regions
unpainted — which renders as a black half-screen until the next frame
lands. That is exactly the symptom: only on first load, only on the wide
desktop, never after a refresh once the layers are cached.
The transition itself promotes what it needs, when it needs it, and the
reveal script already clears will-change afterwards. Declaring it up front
buys nothing and costs the first frame. */
.js [data-rv]:not(.is-in){opacity:0}
.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}
/* same reasoning — the parallax script writes transforms every frame, which
promotes the element on its own. A standing will-change just holds a layer
open from first paint. */
[data-px]{will-change:auto}
/* ---------- 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 ---------- */
/* touch-action:none is the single line that makes this work on a phone. Without
it the browser claims the gesture as a scroll and cancels the drag. */
.cmp{position:relative;overflow:hidden;aspect-ratio:var(--ar,3/2);cursor:ew-resize;
user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
touch-action:none;background:var(--ink-700)}
.cmp.is-dragging{cursor:grabbing}
.cmp.is-dragging .cmp-handle{background:var(--ember-500)}
.cmp.is-dragging .cmp-handle::after{transform:translate(-50%,-50%) scale(1.12)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
pointer-events:none;-webkit-user-drag:none}
.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);
transition:transform .18s var(--ease),background .18s var(--ease);
}
/* a gentle pulse on a phone, so the visitor knows the photo is draggable */
@media (pointer:coarse){
.cmp:not(.is-dragging) .cmp-handle::after{animation:cmp-hint 2.6s ease-in-out 1s 3}
}
@keyframes cmp-hint{
0%,100%{transform:translate(-50%,-50%) scale(1)}
35%{transform:translate(calc(-50% - 13px),-50%) scale(1.06)}
65%{transform:translate(calc(-50% + 13px),-50%) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.cmp-handle::after{animation:none!important}}
.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}
/* ---------- RANGE SLIDER ----------
THE DONATE-PAGE SLIDER BUG. The input was `height:4px`. The 30px thumb is
only *painted* outside that box — the element's hit area, and therefore the
only region that starts a drag, was the 4px-tall track. On a mouse that is
merely fiddly; on a phone, where a fingertip is ~40px wide and the browser
needs the touch to land inside the control to claim the gesture, it is
effectively impossible. Hence "the slider on the donate page does not work".
Now the input is a 44px-tall transparent hit area with the visible 6px track
painted by ::-webkit-slider-runnable-track / ::-moz-range-track inside it. */
input[type=range]{
-webkit-appearance:none;appearance:none;
width:100%;height:44px; /* the hit area, not the look */
background:transparent;padding:0;border:0;margin:0;
cursor:pointer;touch-action:pan-y; /* horizontal drag is ours */
}
input[type=range]:focus{outline:0}
input[type=range]:focus-visible{outline:3px solid var(--wheat-400);outline-offset:4px}
/* track */
input[type=range]::-webkit-slider-runnable-track{
height:6px;border-radius:3px;background:var(--line);border:0}
input[type=range]::-moz-range-track{
height:6px;border-radius:3px;background:var(--line);border:0}
input[type=range]::-moz-range-progress{
height:6px;border-radius:3px;background:var(--ember-500)}
/* thumb — centred on the 6px track inside the 44px box */
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:32px;height:32px;border-radius:50%;
margin-top:-13px; /* (6 - 32) / 2 */
background:var(--ember-500);border:4px solid var(--cream-50);
box-shadow:0 4px 14px rgba(0,0,0,.5);cursor:grab;
transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
input[type=range]::-moz-range-thumb{
width:32px;height:32px;border-radius:50%;
background:var(--ember-500);border:4px solid var(--cream-50);
box-shadow:0 4px 14px rgba(0,0,0,.5);cursor:grab}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14);cursor:grabbing;
box-shadow:0 6px 22px rgba(232,93,31,.6)}
input[type=range]:active::-moz-range-thumb{transform:scale(1.14);cursor:grabbing}
/* a phone deserves a bigger grab handle still */
@media (pointer:coarse){
input[type=range]{height:52px}
input[type=range]::-webkit-slider-thumb{width:38px;height:38px;margin-top:-16px}
input[type=range]::-moz-range-thumb{width:38px;height:38px}
}
/* ---------- 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) ---------- */
/* ---------- QUICK-GIVE ----------
THE "BUTTONS DO NOT WORK ON MOBILE" BUG.
.qg is a fixed flex container sized by its largest child — the panel, which
is min(88vw,340px) wide and ~420px tall. The panel is hidden with
visibility:hidden when closed, but the CONTAINER is not: it kept its full
box and pointer-events:auto, so it sat as an invisible rectangle over the
bottom-right of every page on the site, permanently swallowing every tap
that landed inside it. On a 390px-wide phone that is most of the lower half
of the screen — including, on the donate page, the amount slider and the
Give This Amount button.
Fix: the container itself is transparent to pointers; only the FAB, and the
panel while it is actually open, accept them. */
.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;
pointer-events:none}
.qg-fab{pointer-events:auto}
.qg.is-open .qg-panel{pointer-events:auto}
.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;
pointer-events:none;
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 .qg-num{color:var(--wheat-400);font-weight:700;letter-spacing:.01em}
.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)}
/* THE SECONDARY BUTTON WAS NEVER OUTLINED.
.btn-ghost sets background:transparent up at line 228, but the bare .btn
rule above is declared later with the same specificity, so it won every
time — every "ghost" button on every page rendered as a solid accent block
identical to the primary next to it. Two identical buttons side by side is
why the calls to action read as a wall of colour on a phone. Restored here,
after the accent rule, so the pair reads as primary + secondary again. */
.btn-ghost{background:transparent;color:var(--fg)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--paper-1)}
.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}
/* 16rem basis = ~384px, so exactly one tile fit a phone row and the gallery
ran to 10,000px. 8rem gives two per row and halves every gallery page. */
@media (max-width:700px){.jgal{gap:8px}.jgal>*{flex-basis:calc(var(--r) * 8rem)}}
@media (max-width:390px){.jgal>*{flex-basis:calc(var(--r) * 7.2rem)}}
/* 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}
/* visible result — the old button gave no feedback at all when the copy failed */
.copy-btn.is-copied,.give-bank .copy-btn.is-copied{
background:var(--jade-500);border-color:var(--jade-500);color:#fff}
.copy-btn.is-failed,.give-bank .copy-btn.is-failed{
background:var(--ember-500);border-color:var(--ember-500);color:#fff;letter-spacing:.02em}
.give-bank td{position:relative}
/* on a phone put the button on its own line so it is never cramped against a
long IBAN, and give it a real 44px target */
@media (max-width:640px){
.give-bank .copy-btn{display:inline-flex;align-items:center;margin:.45rem 0 0;
min-height:44px;padding:.6rem 1rem;font-size:.7rem}
.give-bank th{width:auto;display:block;padding:.75rem 0 .1rem;border-bottom:0}
.give-bank td{display:block;padding:0 0 .85rem}
}
/* ══════════════════════════════════════════════════════════════════════════
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) * 5.2rem)}}
.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}
/* ── THE PAGE-LENGTH BUG.
This rule used to include .grid.g3 and .grid.g4 and force EVERY grid on
the site to a single column with !important. Those two classes are the
photo grids — a 24-picture section became 24 stacked full-width images,
about 6,000px of scrolling, and there was no way to override it further
down the stylesheet because of the !important.
Asymmetric text+image splits (g2, g-6-6, g-7-5, g-5-7) genuinely do need
one column on a phone, so they stay here. The photo grids are handled in
the v20 density block at the end of this file, where they get two. */
.grid.g2,
.grid.g-6-6,.grid.g-7-5,.grid.g-5-7{grid-template-columns:1fr!important}
.faith-grid{grid-template-columns:1fr!important}
.stats{grid-template-columns:1fr 1fr!important}
/* the two link columns sit happily side by side; four stacked blocks made
the footer alone almost 1,900px on a phone */
.footer-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.6rem 1.2rem}
.footer-grid>*:first-child,.footer-grid>*:last-child{grid-column:1/-1}
.footer-links a{font-size:.9rem}
/* ── 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){
/* two tiles per phone row, not one — halves every gallery page */
.museum .jgal>*{flex-basis:calc(var(--r) * 4.6rem)}
.stats{grid-template-columns:1fr!important}
.d1{font-size:clamp(2rem,8.5vw,2.6rem)}
/* The headline line-breaks were being stripped here with `.dsp br{display:none}`.
The intent was that desktop breaks read oddly on a phone — but these
headlines pair a plain phrase with a highlighted .bar phrase, and .bar is
an inline-block with a coloured background. Remove the break and the two
run together on one line, where the highlight box overlaps the words in
front of it. The authored break is what keeps the highlight on its own
line, which is exactly how the design is meant to read. */
.dsp .bar{margin-top:.15em}
/* let a long highlighted phrase wrap inside its own box rather than
overflow the line */
.dsp .bar{max-width:100%}
}
/* 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}
}
/* ==========================================================================
v20 — MOBILE DENSITY
--------------------------------------------------------------------------
The client's report: "on the mobile it is too long, some pages are extremely
long". They were right, and there were three separate causes.
1. Every multi-column grid collapsed to a SINGLE column below 760px. A photo
grid of 24 images became 24 full-width images stacked — roughly 6,000px
of scrolling for one section. Photo and stat grids now hold two columns
all the way down; a phone is perfectly capable of showing two pictures
side by side, and it cuts those sections in half.
2. Section padding used the same clamp on a phone as on a 27-inch monitor.
Vertical rhythm that reads as generous on a desktop reads as dead space
on a 390px screen, and it was repeated 8-12 times per page.
3. Long prose blocks ran to 400-600 words with no way past them. Those now
collapse behind a "Read more" control, so the visitor can move on.
Nothing is deleted — every word and every image is still on the page and
still in the HTML for search engines. It is only laid out tighter.
========================================================================== */
@media (max-width:760px){
/* ── 1 · two columns for PICTURES ONLY ───────────────────────────────
Two columns is right for a grid of photographs and wrong for a grid of
text cards — at ~175px a paragraph wraps to three words a line and reads
as broken. So the default stays one column and the two-column rule is
scoped with :has() to grids whose children are actually figures.
Browsers without :has() (pre-2023) simply keep the one-column layout,
which is the old behaviour and still correct. */
.grid.g3,.grid.g4{grid-template-columns:1fr}
/* a grid counts as "pictures" if its direct children are figures, .gal
items, or .ph photo frames — those are the three wrappers this site uses */
.grid.g3:has(> figure),.grid.g4:has(> figure),
.grid.g3:has(> .gal), .grid.g4:has(> .gal),
.grid.g3:has(> .ph), .grid.g4:has(> .ph){grid-template-columns:repeat(2,1fr);gap:10px}
.jgal{gap:8px}
.stats,.hero-strip{grid-template-columns:repeat(2,1fr)}
.team-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.lp-wall{grid-template-columns:repeat(2,1fr);gap:1rem .7rem}
/* captions inside a half-width figure need to shrink to match */
.grid.g3 figcaption,.grid.g4 figcaption{font-size:.68rem;line-height:1.35;padding:.5rem .55rem}
.gal figcaption{font-size:.68rem}
/* text-heavy cards stay full width — two columns of prose at 175px is
unreadable — but they get tighter padding and type */
.give-grid{grid-template-columns:1fr;gap:.75rem}
.give-card{padding:1.25rem 1.15rem}
.give-card h3{font-size:1.05rem;line-height:1.25}
.give-card p{font-size:.88rem;line-height:1.5}
.give-card .amt{font-size:1.9rem}
/* checklists read fine in two columns when the items are short */
.checks.is-tight{grid-template-columns:repeat(2,1fr);display:grid;gap:.35rem 1rem}
.checks.is-tight li{font-size:.86rem}
/* ── 2 · tighten the vertical rhythm ─────────────────────────────────── */
:root{--sec:clamp(2.4rem,7vw,3.4rem)}
.section-sm{padding-block:clamp(1.8rem,5vw,2.6rem)}
.band{padding-block:clamp(2.4rem,8vw,4rem)}
.footer-top{padding-block:2.2rem 1.6rem}
.lp-do,.lp-port,.lp-map{padding-block:clamp(2.4rem,7vw,3.6rem)}
.center[style*="margin-bottom"]{margin-bottom:1.5rem!important}
.lp-head{margin-bottom:1.5rem}
.mt-4{margin-top:1.25rem}
.plate{padding-block:clamp(1.6rem,5vw,2.4rem)}
/* the decorative outline word costs a lot of height and reads as a smudge
at this size */
.lp-ghost{font-size:clamp(3.5rem,14vw,6rem)}
}
@media (max-width:430px){
/* on the narrowest phones give the photo grids a little more room each */
.grid.g4{grid-template-columns:repeat(2,1fr)}
.team-grid{gap:10px}
}
/* ── 3 · READ-MORE COLLAPSER ───────────────────────────────────────────────
Applied to long prose blocks. On desktop it is inert — the full text is
always shown. On a phone the block is clipped to a readable teaser with a
fade, and a button opens it. Progressive enhancement: with JS off, or on a
browser that does not run the script, the content is simply fully visible.
------------------------------------------------------------------------ */
.rm-more{display:none}
@media (max-width:760px){
.rm.is-collapsible{position:relative;overflow:hidden;
max-height:var(--rm-h,15em);transition:max-height .5s var(--ease)}
.rm.is-collapsible::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;
pointer-events:none;transition:opacity .35s var(--ease);
background:linear-gradient(to bottom,transparent,var(--rm-fade,var(--ink-900)) 88%)}
.rm.is-open{max-height:var(--rm-full,none)}
.rm.is-open::after{opacity:0}
.rm-more{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
min-height:44px;padding:.6rem 1.15rem;border:2px solid var(--line);
background:transparent;color:var(--wheat-400);cursor:pointer;
font:800 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
transition:.25s var(--ease);-webkit-tap-highlight-color:transparent}
.rm-more:hover,.rm-more:focus-visible{background:var(--wheat-400);color:var(--ink-900);
border-color:var(--wheat-400)}
.rm-more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.rm-more[aria-expanded=true] svg{transform:rotate(180deg)}
/* on a light section the fade has to match the light background */
.bg-cream .rm.is-collapsible::after,.bg-paper .rm.is-collapsible::after,
.lp-do .rm.is-collapsible::after{--rm-fade:var(--paper-1)}
}
@media (prefers-reduced-motion:reduce){
.rm.is-collapsible{transition:none}
}
/* the giving-bar close button was 34px — under the 44px touch floor, and it is
the only way to dismiss a bar that covers the bottom of the screen */
@media (max-width:760px){
.givebar-x{width:44px;height:44px}
.givebar-amt{min-height:44px;display:inline-flex;align-items:center}
}
/* ══════════════════════════════════════════════════════════════════════════
v21 — THE MOBILE MENU COULD NOT BE CLOSED
--------------------------------------------------------------------------
.drawer is z-index:130 and 94vw wide. .header is z-index:100 and, being
position:sticky with a z-index, forms its own stacking context — so the
burger inside it can never paint above the drawer no matter what z-index it
is given. With the menu open on a 390px phone the burger (which had turned
into an X, inviting a tap) sat UNDERNEATH the drawer and did nothing.
That left exactly two ways out: tap one of the nav links, or find the 23px
strip of scrim down the left edge. On a narrower phone that strip is
smaller still. A visitor who opened the menu just to look was trapped in it.
Fix: a real close button inside the drawer, injected by hhm.js so it exists
on every page without editing 22 files. The scrim strip and the nav links
still work; this just makes the obvious thing possible.
══════════════════════════════════════════════════════════════════════════ */
.drawer-x{
position:absolute;top:.9rem;right:var(--gut,1rem);z-index:2;
width:46px;height:46px;flex:none;display:grid;place-items:center;
background:transparent;border:2px solid var(--line);border-radius:2px;
color:var(--cream-50);cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.drawer-x:hover,.drawer-x:focus-visible{background:var(--ember-500);border-color:var(--ember-500)}
.drawer-x:active{transform:scale(.92)}
.drawer-x svg{width:20px;height:20px;pointer-events:none}
/* the drawer's own logo must not run under the button */
.drawer > img:first-of-type{max-width:calc(100% - 64px)}
/* ══════════════════════════════════════════════════════════════════════════
v22 — MOBILE PAGE HERO: CARD CAROUSEL FIRST, THEN THE WORDS
--------------------------------------------------------------------------
The client's reference layout: header, then a swipeable photo card with the
neighbouring cards peeking in at the edges, then dots, then the eyebrow,
the headline, the paragraph and two full-width buttons.
Two decisions worth recording:
1. The carousel is a native scroll-snap container, not a JS drag. A finger
on `overflow-x:auto` gets the platform's own momentum, rubber-band and
snap physics — it cannot fail the way a hand-rolled drag can, and it is
what made every previous slider on this site feel broken on a phone.
JavaScript only mirrors the scroll position into the dots.
2. The old hero laid the headline over a darkened full-bleed photo. That
reads well at 1440px and poorly at 390px, where the photo becomes a
murky strip behind the text. Splitting them — picture, then words — is
what the reference does and it is the right call for the size.
Desktop is completely untouched: .mhero is display:none above 960px and the
original .phero-media background hero still runs there.
══════════════════════════════════════════════════════════════════════════ */
.mhero{display:none}
@media (max-width:960px){
.phero{padding-block:clamp(1rem,3vw,1.5rem) clamp(2rem,6vw,3rem);
background:var(--ink-900)}
.phero-media{display:none} /* the darkened background photo */
.mhero{display:block;margin-bottom:clamp(1.4rem,4vw,2rem)}
.mhero-track{
display:flex;gap:10px;
/* WITHOUT THIS the flex default (align-items:stretch) stretches each card
to the track's height, and then aspect-ratio derives the WIDTH from that
height instead of the other way round — the card came out 1017px wide
inside a 390px phone. flex-start lets flex-basis set the width and
aspect-ratio set the height, which is the intent. */
align-items:flex-start;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding-inline:var(--gut);
scroll-padding-inline:var(--gut);
overscroll-behavior-x:contain; /* don't let a swipe navigate back */
}
.mhero-track::-webkit-scrollbar{display:none}
.mhero-slide{
flex:0 0 82%;scroll-snap-align:center;
aspect-ratio:4/5;border-radius:18px;overflow:hidden;
background:var(--ink-700);position:relative;
box-shadow:0 10px 30px -14px rgba(0,0,0,.75);
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.mhero-slide img{width:100%;height:100%;object-fit:cover;display:block;
-webkit-user-drag:none;user-select:none}
/* the centred card sits slightly proud of its neighbours */
.mhero-slide:not(.is-on){transform:scale(.94);box-shadow:0 6px 18px -12px rgba(0,0,0,.6)}
.mhero-dots{display:flex;gap:7px;justify-content:center;margin-top:1rem}
.mhero-dots button{
width:8px;height:8px;padding:0;border:0;border-radius:50%;
background:rgba(249,245,236,.26);cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:width .35s var(--ease),background .35s var(--ease),border-radius .35s var(--ease)}
.mhero-dots button.is-on{width:24px;border-radius:4px;background:var(--wheat-400)}
/* a 44px tap target without a 44px dot */
.mhero-dots button::before{content:"";position:absolute;inset:-18px -6px}
.mhero-dots button{position:relative}
/* the words, now sitting under the picture rather than on top of it */
.phero .crumb{margin-bottom:.85rem}
.phero h1{margin-top:.35rem}
.phero .lead{color:rgba(249,245,236,.8)}
/* the reference shows both calls to action full width and stacked */
.phero .row{flex-direction:column;align-items:stretch;gap:.7rem}
.phero .row .btn{width:100%;justify-content:center}
}
/* ── overscroll: the black band under the footer ──────────────────────────
Scrolling past the end of the page rubber-bands and exposes the browser
canvas. had no background of its own, so on a phone in dark mode
that canvas painted the browser's default black — which is what the client
saw below the footer. Give the root the site's own colour and stop the
vertical bounce from chaining to the browser. */
html{background:var(--ink-900);overscroll-behavior-y:none}
body{background:var(--ink-900)}
/* ── donate: the impact panel on a phone ──────────────────────────────────
The $6 and $1,500 end labels sat in a flex row that wrapped, so they
stacked into two lines under the slider instead of marking its two ends. */
.impact-ends{display:flex;justify-content:space-between;align-items:center;
flex-wrap:nowrap;gap:1rem;margin-top:.5rem}
.impact-ends span{font-weight:700;opacity:.6;font-size:.85rem;white-space:nowrap}
@media (max-width:760px){
.impact{gap:0}
.impact > div{padding-inline:0}
.impact-amt{font-size:clamp(2.8rem,14vw,4rem);line-height:1}
.impact .btn{width:100%;justify-content:center}
.impact-list li{font-size:1rem;padding:.6rem 0}
.impact-list li b{font-size:1.6rem;min-width:2.2em}
}
/* ══════════════════════════════════════════════════════════════════════════
v23 — JUSTIFIED PHOTO GRIDS ON MOBILE
--------------------------------------------------------------------------
The two-column photo grids mixed portrait and landscape source images, so
neighbouring cards came out 119px and 269px tall. Grid rows are sized by
their tallest cell, which left a block of dead space beside every short
photo and made the whole gallery read as ragged rather than laid out.
Every cell is now the same square, with the photo cropped to fill it. That
is what "justified" means to the eye — an even mosaic — and it is also what
lets two columns work at all at this width. The full-resolution image is
untouched; the lightbox still opens the whole frame.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
.grid.g3:has(> figure) > figure,
.grid.g4:has(> figure) > figure,
.grid.g3:has(> .gal) > .gal,
.grid.g4:has(> .gal) > .gal,
.grid.g3:has(> .ph) > .ph,
.grid.g4:has(> .ph) > .ph{
aspect-ratio:1;overflow:hidden;border-radius:6px}
.grid.g3:has(> figure) > figure > img,
.grid.g4:has(> figure) > figure > img,
.grid.g3:has(> .gal) > .gal > img,
.grid.g4:has(> .gal) > .gal > img,
.grid.g3:has(> .ph) > .ph > img,
.grid.g4:has(> .ph) > .ph > img{
width:100%;height:100%;object-fit:cover;display:block}
/* the verse tiles sit in the same grids — square them off to match so the
mosaic stays even */
.grid.g3 > .gal-verse,.grid.g4 > .gal-verse{aspect-ratio:1;border-radius:6px}
.gal-verse-in{height:100%;display:flex;flex-direction:column;justify-content:center;
padding:.9rem}
.gal-verse-in q{font-size:.82rem;line-height:1.35}
.gal-verse-in cite{font-size:.6rem;margin-top:.4rem}
/* the justified gallery page: even squares read better than ragged ratios */
.jgal>*{--r:1!important}
.museum .jgal>*{--r:1!important}
}
/* ── homepage hero: belt and braces ───────────────────────────────────────
.lp-show carries aspect-ratio on mobile and its slides are absolutely
positioned, so if aspect-ratio is ignored the box collapses to zero height
and the slideshow simply is not there. min-height guarantees a visible card
on any engine, and the inherited align-self/min-height from the desktop
rule are cleared so they cannot fight it. */
@media (max-width:960px){
.lp-show{align-self:auto;min-height:64vw}
.lp-slide{display:block}
.lp-slide img{min-height:100%}
}
/* ══════════════════════════════════════════════════════════════════════════
v24 — LIGHT THEME
--------------------------------------------------------------------------
hhm.js already had a working toggle: it writes data-theme="light" onto
, remembers the choice in localStorage and syncs any .themer button.
What it never had was a stylesheet to act on, or a button to press — so
pressing nothing did nothing. Both are supplied here.
The site is tokenised, so the theme is mostly a matter of flipping the
surface and text variables. The one trap is --cream-50: it is used BOTH as
"light text on a dark surface" and as "a cream surface". Flipping it wholesale
turns the text on the permanently-coloured blocks (jade verse tiles, the
ember ticker, the crimson plates) invisible. So the variables flip, and the
handful of places where cream is text on a now-light surface are corrected
explicitly below. Everything lives inside [data-theme="light"] — dark mode
cannot regress.
══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"]{
/* surfaces, darkest → lightest becomes lightest → darkest */
--ink-900:#F7F2E7;
--ink-850:#FFFDF7;
--ink-800:#F1E9D8;
--ink-700:#E6DAC2;
--ink-600:#D6C7AA;
--ink-400:#B8A585;
--paper-1:#FFFDF7;
--paper-2:#F7F2E7;
/* THE CARBON TOKENS DELIBERATELY DO NOT FLIP (v25).
--carbon-1/--carbon-2/--on-carbon drive the sections that are dark *by
design*: the interior page heroes (.phero, which sit on a photograph
under a near-black scrim), the feature bands (.band, .bg-ink-2, .bg-slate,
.story-stage) and the landing page's own blocks (.lp-hero, .lp-band,
.lp-close …). Those sections are full of hard-coded cream text, dark
translucent card fills and photo scrims that no token can reach. Inverting
the anchor turned the surfaces cream while the text stayed cream — which
is exactly how the hero copy, the crumb, the impact list and half of the
donate page vanished in light mode.
So light mode is: a cream page shell, cream content sections, and dark
feature bands — the same treatment the topbar and the footer already had.
Nothing has to be un-hard-coded, and every one of those sections is
readable in both themes for the same reason it was readable in one. */
--on-paper:#191510;
/* type */
--fg:#191510;
--muted:rgba(25,21,16,.72);
--muted-2:rgba(25,21,16,.62);
--line:rgba(25,21,16,.24);
--line-soft:rgba(25,21,16,.12);
/* the marigold is too pale to read on paper — deepen it for text use */
--wheat-400:#A87200;
--wheat-300:#8A5D00;
--wheat-200:#6E4A00;
--shadow-lift:0 26px 60px -24px rgba(60,45,20,.35);
color-scheme:light;
}
/* --- text that was cream on a dark surface and is now on a light one ---- */
[data-theme="light"] body{background:var(--ink-900);color:var(--fg)}
[data-theme="light"] .body strong{color:var(--fg)}
[data-theme="light"] .btn-ghost{border-color:rgba(25,21,16,.34);color:var(--fg)}
[data-theme="light"] .btn-ghost:hover{color:#FFFDF7}
[data-theme="light"] .btn-ink{background:var(--ink-800);border-color:var(--ink-800);color:var(--fg)}
[data-theme="light"] .nav>li>a,[data-theme="light"] .nav>li>button{color:rgba(25,21,16,.78)}
[data-theme="light"] .nav>li>a:hover,[data-theme="light"] .nav>li.is-active>a,
[data-theme="light"] .nav>li>button:hover{color:var(--fg)}
[data-theme="light"] .mega-item b{color:var(--fg)}
[data-theme="light"] .drawer-x{color:var(--fg)}
[data-theme="light"] .field input,[data-theme="light"] .field textarea,
[data-theme="light"] .field select{background:rgba(25,21,16,.04);color:var(--fg)}
[data-theme="light"] .cmp-tag,[data-theme="light"] .cmp-note{
background:#191510;color:#F9F5EC}
/* --- surfaces that must stay dark, with their light text intact ---------- */
[data-theme="light"] .header{background:rgba(255,253,247,.94);
border-bottom:1px solid rgba(25,21,16,.1)}
[data-theme="light"] .header.is-stuck{background:rgba(255,253,247,.99)}
[data-theme="light"] .topbar{background:#191510;color:#F9F5EC}
[data-theme="light"] .topbar a{color:rgba(249,245,236,.8)}
[data-theme="light"] .drawer{background:#FFFDF7;color:var(--fg)}
[data-theme="light"] .drawer nav a,[data-theme="light"] .drawer summary{color:var(--fg)}
[data-theme="light"] .footer{background:#191510;color:#F9F5EC}
[data-theme="light"] .footer .small,[data-theme="light"] .footer p{color:rgba(249,245,236,.72)}
[data-theme="light"] .footer h4{color:#FFB800}
[data-theme="light"] .footer-links a{color:rgba(249,245,236,.8)}
[data-theme="light"] .footer-verse{color:rgba(249,245,236,.85)}
[data-theme="light"] .gal-verse,[data-theme="light"] .bar-jade,
[data-theme="light"] .btn-jade,[data-theme="light"] .bg-jade,
[data-theme="light"] .bar,[data-theme="light"] .plate-dark q{color:#F9F5EC}
[data-theme="light"] .ticker,[data-theme="light"] .ticker-track span{color:#fff}
[data-theme="light"] .lb{background:rgba(25,21,16,.96)}
[data-theme="light"] .lb-cap{color:rgba(249,245,236,.8)}
[data-theme="light"] .qg-panel{background:#FFFDF7;border-color:rgba(25,21,16,.14)}
[data-theme="light"] .qg-panel h4,[data-theme="light"] .qg-amts a,
[data-theme="light"] .qg-person b{color:var(--fg)}
[data-theme="light"] .givebar{background:var(--accent);color:#fff}
[data-theme="light"] .lp-cappill{background:rgba(25,21,16,.78);color:#fff}
[data-theme="light"] .mhero-dots button{background:rgba(25,21,16,.22)}
[data-theme="light"] .mhero-dots button.is-on{background:var(--ember-500)}
[data-theme="light"] .lp-bar{background:rgba(25,21,16,.2)}
[data-theme="light"] .lp-bar.is-on{background:var(--ember-500)}
[data-theme="light"] .preload{background:#F7F2E7}
[data-theme="light"] .rm.is-collapsible::after{--rm-fade:#F7F2E7}
/* --- the toggle itself -------------------------------------------------- */
.themer{
width:44px;height:44px;flex:none;display:grid;place-items:center;
background:transparent;border:2px solid var(--line);border-radius:2px;
color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.themer:hover,.themer:focus-visible{background:var(--wheat-400);border-color:var(--wheat-400);
color:var(--ink-900)}
.themer svg{width:19px;height:19px;pointer-events:none}
.themer .i-sun{display:none}
.themer .i-moon{display:block}
[data-theme="light"] .themer .i-sun{display:block}
[data-theme="light"] .themer .i-moon{display:none}
/* in the drawer it sits on a row with a label, so give it a little room */
.drawer .themer{width:46px;height:46px}
/* ---------- ACCEPTED PAYMENT MARKS (donate page) ----------
These sit under the PayPal button so a donor can see at a glance that a
card works without a PayPal account — the single most common reason people
abandon a donation page.
Only the networks a PayPal hosted donate button actually accepts through
guest checkout are shown: Visa, Mastercard, American Express, Discover, and
PayPal itself. Apple Pay and Google Pay are deliberately absent — see the
note to the client; showing a wallet that then fails at checkout costs more
donations than it wins. */
.paymarks{margin-top:1.25rem}
.paymarks-lead{display:block;font-size:.82rem;color:rgba(25,21,16,.66);margin-bottom:.6rem}
.paymarks ul{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;list-style:none;padding:0;margin:0}
.paymarks li{line-height:0}
.paymarks svg{width:46px;height:31px;display:block}
.paymarks .pm-bg{fill:#fff;stroke:rgba(25,21,16,.16)}
.paymarks text{text-anchor:middle;font-family:var(--sans);font-weight:800}
.paymarks .pm-visa{font-size:11px;fill:#1A1F71;letter-spacing:.5px}
.paymarks .pm-amex{font-size:8px;fill:#fff;letter-spacing:.3px}
.paymarks .pm-disc{font-size:9px;fill:#231F20;letter-spacing:.2px}
.paymarks .pm-pp{font-size:9.5px;fill:#003087;font-style:italic}
@media (max-width:760px){
.paymarks svg{width:42px;height:28px}
.paymarks-lead{font-size:.78rem}
}
[data-theme="light"] .paymarks-lead{color:rgba(25,21,16,.66)}
[data-theme="light"] .bg-ink,[data-theme="light"] .bg-cream{
--line:rgba(15,90,78,.30);
}
/* ---------- KICKER CONTRAST ON DARK SECTIONS ----------
.kicker takes its colour from the page's --accent. Several accents are deep
by design — jade #0F5A4E on the church and team pages, crimson #9E2B25 on
Christmas — and the hero sections they sit in are near-black. Measured, that
is a contrast ratio of 2.2 to 2.9 against #100E0C, well under the 4.5 needed
for body-size text. It is the italic line directly above the headline, so it
is the second thing a visitor reads and it was close to unreadable.
Rather than hand-picking a colour per accent, the accent is mixed toward warm
cream: the hue survives, the luminance comes up. Browsers without color-mix
simply keep the original declaration, so nothing breaks. As of v25 these
sections stay dark in both themes, so the correction applies in both. */
.phero .kicker,.band .kicker,.hero .kicker,
.bg-ink-2 .kicker,.bg-slate .kicker,.story-stage .kicker,
.phero .eyebrow,.band .eyebrow,.hero .eyebrow,
.bg-ink-2 .eyebrow,.bg-slate .eyebrow,.story-stage .eyebrow{
color:color-mix(in srgb, var(--accent, var(--ember-500)) 42%, #FFE4BC);
}
.phero .eyebrow::before,.phero .eyebrow::after,
.band .eyebrow::before,.band .eyebrow::after,
.hero .eyebrow::before,.hero .eyebrow::after,
.bg-ink-2 .eyebrow::before,.bg-ink-2 .eyebrow::after,
.bg-slate .eyebrow::before,.bg-slate .eyebrow::after,
.story-stage .eyebrow::before,.story-stage .eyebrow::after{
background:color-mix(in srgb, var(--accent, var(--ember-500)) 42%, #FFE4BC);
}
/* the donate button's label wrapped to three lines on a phone because the
arrow icon was competing for the same row — give the text room and let it
break at most once */
@media (max-width:760px){
.pay-btn{padding:1.05rem .9rem;font-size:.98rem;gap:.55rem;line-height:1.2;
text-align:center;flex-wrap:nowrap;white-space:nowrap;letter-spacing:.02em}
.pay-btn .ico{flex:none;width:20px;height:20px}
.pay-hero{padding:1.6rem 1.15rem}
.pay-hero p{font-size:.95rem}
}
/* ══════════════════════════════════════════════════════════════════════════
v25 — READABILITY PASS
--------------------------------------------------------------------------
Two faults ran through the whole site, one per theme, and both came from
the same place: a colour hard-coded for the surface a component *usually*
sits on, used on a component that also appears on the opposite surface.
1. LIGHT MODE — the permanently-dark furniture (topbar, footer, lightbox,
the orange giving bar) kept its dark background but inherited the light
theme's dark text tokens. Every element carrying an inline
style="color:var(--muted)" — the footer blurb, the address, the phone
number, the newsletter note — turned near-black on near-black. Rather
than chase the inline styles, the tokens are re-anchored inside those
surfaces, so var(--muted) resolves to the cream value again.
2. DARK MODE — .bg-ink and .bg-cream sections are cream in *both* themes.
Marigold (#FFB800) and vermilion (#FF7A33) are text colours tuned for
near-black; on cream they measure 1.5:1 to 2.4:1. That is the
"unreadable heading" — the big serif-italic line in every ministry
page headline, and the bold lead-ins under it.
Ratios below are measured against the section's own background, and every
value clears WCAG AA for the size it is used at.
══════════════════════════════════════════════════════════════════════════ */
/* ---- 1. the giving bar is orange in both themes: it needs the cream family,
not the marigold one, or the strapline sits gold-on-orange at 1.2:1 ---- */
.givebar-txt span{color:rgba(255,255,255,.92)}
.givebar .btn{background:#191510;border-color:#191510;color:#F9F5EC}
.givebar .btn::before{background:#F9F5EC}
.givebar .btn:hover{color:#191510;border-color:#F9F5EC}
/* the footer headings and the credit link, on the footer's own dark ground */
.footer h4{color:#FFB800}
.credit a{color:#FFC93F}
.topbar .v{color:#FFD467}
/* ---- 2. marigold and vermilion, made legible on the cream sections ------
#8A5D00 measures 5.2:1 on #F7F2E7 and 5.7:1 on #FFFDF7.
#B8480F measures 4.7:1 and 5.2:1 respectively. Both hold their hue. */
.bg-ink .italic-gold,.bg-cream .italic-gold,
.bg-ink .checks li b,.bg-cream .checks li b,
.bg-ink .tq cite b,.bg-cream .tq cite b,
.bg-ink .plate cite,.bg-cream .plate cite,
.bg-ink .duo figcaption span,.bg-cream .duo figcaption span,
.bg-ink .team-card span,.bg-cream .team-card span,
.bg-ink .hero-strip b,.bg-cream .hero-strip b,
.bg-ink .hero-count b,.bg-cream .hero-count b,
.bg-ink .acc-a a,.bg-cream .acc-a a,
.bg-ink .acc-q:hover,.bg-cream .acc-q:hover,
.bg-ink .field label,.bg-cream .field label,
.bg-ink .copy-btn,.bg-cream .copy-btn,
.bg-ink .ph-cap em,.bg-cream .ph-cap em,
.bg-ink .crumb i,.bg-cream .crumb i,
.bg-ink .wheat-rule,.bg-cream .wheat-rule,
.bg-ink .give-card .amt,.bg-cream .give-card .amt,
.bg-ink .cmp-note::before,.bg-cream .cmp-note::before,
.bg-ink .vid-meta span,.bg-cream .vid-meta span{color:#8A5D00}
.bg-ink .pillar .n,.bg-cream .pillar .n,
.bg-ink .min-go,.bg-cream .min-go,
.bg-ink .stat b .p,.bg-cream .stat b .p,
.bg-ink .impact-list li b,.bg-cream .impact-list li b,
.bg-ink .give-card .k,.bg-cream .give-card .k{color:#B8480F}
.bg-ink .min-card:hover .min-body h3,.bg-cream .min-card:hover .min-body h3,
.bg-ink .min-card:hover .min-go,.bg-cream .min-card:hover .min-go{color:#B8480F}
/* the mid-tone body text on cream was set at .52 alpha — 3.6:1 */
.bg-ink,.bg-cream{--muted-2:rgba(25,21,16,.62)}
.bg-ink-2,.bg-slate,.band,.hero,.phero,.story-stage{--muted-2:rgba(249,245,236,.62)}
/* ---- 3. the highlight bars: always cream, whatever the surface ---------
.bar-* paint a saturated jade / crimson / ember block behind a headline.
They took their text from --cream-50, which a cream section redefines to
near-black — so the headline went dark-on-jade at 2.2:1. */
.bar,.bar-jade,.bar-crimson,.bar-ember,.bar-slate,
.btn-jade,.bg-jade,.plate-dark q,.bg-jade .lead,.bg-jade .body{color:#F9F5EC}
.bar-wheat,.bar-camel,.bar-gold{color:#100E0C}
/* the gallery's alternating verse tile is a dark tile by design — it must
not follow the page to cream, or its cream lettering disappears */
.gal-verse:nth-child(even){background:#14110E}
.gal-verse,.gal-verse q,
.gal-verse cite{color:#F9F5EC}
/* ---- 4. small print that was set too faint in both themes --------------- */
.live-note,.paymarks-lead{color:var(--muted-2)}
.paymarks-lead{color:rgba(25,21,16,.66)}
.qg-panel p,.qg-person span span{color:var(--muted-2)}
/* ══════════════════════════════════════════════════════════════════════════
v26 — THE DARK FURNITURE, DECLARED ONCE
--------------------------------------------------------------------------
v25 stopped the carbon surfaces from flipping. This finishes the job: every
container that is dark in BOTH themes now re-declares the dark palette for
its own subtree in light mode, so anything inside it — including the inline
style="color:var(--muted)" and style="background:var(--ink-900)" written
into the HTML — resolves against the surface it is actually painted on.
Without this, light mode leaks the paper tokens into a near-black block:
the donate slider's impact panel turned cream while its list stayed cream,
the landing page scripture went #8A5D00 on #14110E, and the footer address
went black on black.
The list is NOT scoped to a theme. These surfaces are dark in both, and two
of them — .impact and .cmp-tag — sit inside cream .bg-ink sections, so in
dark mode they were inheriting the *paper* tokens from their parent and
breaking in exactly the same way. Declaring the palette on the container
itself is the only version of this that is true in both directions.
══════════════════════════════════════════════════════════════════════════ */
.topbar,
.footer,
.lb,
.givebar,
.impact,
.impact-panel,
.phero,
.hero,
.band,
.bg-ink-2,
.bg-slate,
.story-stage,
.slave-hero,
.gal-verse,
.cmp-tag,
.cmp-note,
.lp-hero,
.lp-church,
.lp-map,
.lp-port,
.lp-band,
.lp-giveblk,
.lp-close,
.lp-nums{
--fg:#F9F5EC;
--muted:rgba(249,245,236,.78);
--muted-2:rgba(249,245,236,.62);
--cream-50:#F9F5EC;
--on-carbon:#F9F5EC;
--ink-900:#100E0C;
--ink-850:#16130F;
--ink-800:#1F1A15;
--ink-700:#2B241D;
--wheat-400:#FFB800;
--wheat-300:#FFD467;
--wheat-200:#FFF0C4;
--line:rgba(255,184,0,.32);
--line-soft:rgba(249,245,236,.14);
}
/* the ghost button is an outline in the surface's own text colour. The light
theme forced it black everywhere, which made it vanish on the dark bands. */
[data-theme="light"] .btn-ghost{border-color:rgba(25,21,16,.34);color:#191510}
[data-theme="light"] .phero .btn-ghost,
[data-theme="light"] .hero .btn-ghost,
[data-theme="light"] .band .btn-ghost,
[data-theme="light"] .bg-ink-2 .btn-ghost,
[data-theme="light"] .bg-slate .btn-ghost,
[data-theme="light"] .story-stage .btn-ghost,
[data-theme="light"] .impact .btn-ghost,
[data-theme="light"] [class^="lp-"] .btn-ghost{
border-color:rgba(249,245,236,.55);color:#F9F5EC}
[data-theme="light"] .phero .btn-ghost:hover,
[data-theme="light"] .hero .btn-ghost:hover,
[data-theme="light"] .band .btn-ghost:hover,
[data-theme="light"] .bg-ink-2 .btn-ghost:hover,
[data-theme="light"] .bg-slate .btn-ghost:hover,
[data-theme="light"] .story-stage .btn-ghost:hover,
[data-theme="light"] [class^="lp-"] .btn-ghost:hover{color:#100E0C}
/* ---- the eyebrow / kicker on the cream sections -------------------------
.eyebrow paints itself in the page's --accent. Three of the eleven accents
are bright by design (ember #E85D1F, clay #C4622A, water #1E7FA8) and they
land at 3.1:1 to 4.4:1 on cream at 11–14px. Darkening the accent by mixing
it toward its own shadow keeps every page's colour identity while clearing
4.5:1 — and it works for all eleven accents without listing them. */
.bg-ink .eyebrow,.bg-cream .eyebrow,
.bg-ink .kicker,.bg-cream .kicker,
.bg-ink .k,.bg-cream .k,
.bg-ink .stat b,.bg-cream .stat b{
color:color-mix(in srgb, var(--accent, #E85D1F) 74%, #23100A);
}
.bg-ink .eyebrow::before,.bg-ink .eyebrow::after,
.bg-cream .eyebrow::before,.bg-cream .eyebrow::after{
background:color-mix(in srgb, var(--accent, #E85D1F) 74%, #23100A);
}
/* ---- the crimson figure on a near-black fact panel (2.7:1) -------------- */
.bg-ink-2 .fact b,.bg-slate .fact b,.band .fact b,
.bg-ink-2 .fact strong,.bg-slate .fact strong{color:#E0574C}
/* ---- the cite line on a saturated plate is cream, not deep gold --------- */
.plate-jade cite,.plate-crimson cite,.plate-ember cite,
.bg-jade cite,.church-quote cite,
.bg-ink .plate-jade cite,.bg-cream .plate-jade cite,
.bg-ink .church-quote cite,.bg-cream .church-quote cite{color:#FFD467}
/* ---- contact aside, team cards and form hints: gold and jade on paper --- */
.cinfo dt,.tcard .role,.team-card span,.vcard .role{color:#8A5D00}
.cinfo dd a,.bg-ink .cinfo dd a{color:#0F5A4E}
.tcard .wa,.qg-person .wa,.tcard-body .wa{color:#0B7A57}
.field label .opt,.field .opt,span.opt{color:rgba(25,21,16,.62)}
.give-bank th{color:rgba(25,21,16,.66)}
.give-panel .k,.pay-hero .k{color:rgba(25,21,16,.66)}
.pay-hero .k{color:color-mix(in srgb, var(--accent, #E85D1F) 74%, #23100A)}
.givebar-amt{color:#fff}
/* ---- v26b: three page-level