/* ============================================================
HOPE OF A NATION — shared design system
Warm, cinematic, documentary-led ministry platform
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');
:root{
/* ---- palette ---- */
--ink: #211c15; /* warm near-black, authority */
--ink-soft: #2c261d;
--paper: #ffffff; /* white background */
--paper-2: #f6f4ef; /* soft off-white panel */
--ivory: #faf6ed; /* lifted card / light surface */
--brown: #6c5742; /* earthy grounding brown */
--taupe: #8a7c68; /* muted secondary text */
--line: #d8ccb6; /* hairline on cream */
--line-dark: #3a3326; /* hairline on ink */
/* accents — shared chroma family */
--clay: #ab5d3a; /* terracotta / clay — warmth, primary action */
--clay-deep: #8f4a2c;
--green: #51613f; /* muted agriculture green */
--green-deep: #3c4a2e;
--gold: #c2954a; /* soft amber — light, hope, faith (sparingly) */
--teal: #086088; /* logo blue — identity / ministry; also an African color */
--teal-deep: #064255;
--accent: var(--clay);
/* ---- type ---- */
--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
--maxw: 1240px;
--gut: clamp(20px, 5vw, 64px);
/* ---- shared page-header rhythm (keeps interior page intros consistent) ----
--head-pad : light text headers (eyebrow + serif title on paper/white)
--head-pad-dark : photo headers with a scrim + light text */
--head-pad: clamp(48px,7vh,88px) clamp(32px,4.5vh,46px);
--head-pad-dark: clamp(52px,8vh,92px) clamp(56px,9vh,98px);
}
/* tighter interior-header top padding on mobile */
@media (max-width:600px){
:root{
--head-pad: 14px clamp(28px,4vh,40px);
--head-pad-dark: clamp(22px,4vh,34px) clamp(34px,6vh,46px);
}
}
*{ box-sizing:border-box; }
[id]{ scroll-margin-top:92px; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
margin:0;
font-family:var(--sans);
background:var(--paper);
color:var(--ink);
font-size:17px;
line-height:1.6;
letter-spacing:.005em;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1440px; }
section{ position:relative; }
/* section rhythm — shared so generated pages (gift/program detail, etc.) get correct spacing */
.sec{ padding:clamp(72px,11vh,128px) 0; }
.sec-tight{ padding:clamp(56px,8vh,92px) 0; }
@media (max-width:640px){
.sec{ padding:clamp(34px,5.5vh,56px) 0; }
.sec-tight{ padding:clamp(28px,4.5vh,46px) 0; }
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:25px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,64px); }
.section-head .measure{ max-width:54ch; }
@media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }
.eyebrow{
font-family:var(--sans);
font-size:12px; font-weight:700;
letter-spacing:.22em; text-transform:uppercase;
color:var(--clay);
display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--clay); opacity:.7; }
.eyebrow.center{ justify-content:center; }
.eyebrow.gold{ color:var(--gold); }
.eyebrow.gold::before{ background:var(--gold); }
.eyebrow.light{ color:var(--gold); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.01em; line-height:1.04; }
.display{ font-size:clamp(40px, 6.6vw, 88px); font-weight:500; line-height:.98; letter-spacing:-.02em; }
.h-xl{ font-size:clamp(32px, 4.6vw, 60px); line-height:1.02; }
.h-lg{ font-size:clamp(28px, 3.4vw, 44px); }
.h-md{ font-size:clamp(23px, 2.4vw, 31px); }
.lede{ font-size:clamp(18px, 1.5vw, 21px); line-height:1.62; color:var(--brown); }
.serif-italic{ font-style:italic; font-weight:400; }
.muted{ color:var(--taupe); }
p{ margin:0 0 1.1em; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }
/* ---------- buttons ---------- */
.btn{
font-family:var(--sans); font-weight:700; font-size:15px;
letter-spacing:.01em;
display:inline-flex; align-items:center; justify-content:center; gap:.6em;
padding:15px 28px; border-radius:999px;
border:1px solid transparent; cursor:pointer;
transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s, color .25s, box-shadow .25s;
white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--clay); color:#fdf6ee; box-shadow:0 12px 30px -12px rgba(143,74,44,.7); }
.btn-primary:hover{ background:var(--clay-deep); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#000; }
.btn-ghost{ background:transparent; border-color:currentColor; color:var(--ink); }
.btn-ghost.on-dark{ color:var(--paper); border-color:rgba(250,246,237,.5); background:rgba(18,13,8,.28); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.btn-ghost:hover{ background:rgba(33,28,21,.06); }
.btn-ghost.on-dark:hover{ background:rgba(18,13,8,.42); }
.btn-lg{ padding:18px 36px; font-size:16px; }
.textlink{ font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5em; color:var(--clay); }
.textlink .arr{ transition:transform .25s; }
.textlink:hover .arr{ transform:translateX(5px); }
/* ---------- photo placeholders ---------- */
.ph{
position:relative; overflow:hidden;
background:
repeating-linear-gradient(135deg, #e6dbc6 0 14px, #e0d4bd 14px 28px);
display:flex; align-items:flex-end;
}
.ph::after{ /* subtle vignette so it reads as imagery */
content:""; position:absolute; inset:0;
background:radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(60,48,32,.10));
pointer-events:none;
}
.ph .lbl{
position:relative; z-index:2;
margin:14px; padding:7px 11px;
font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
color:#6a5e49; background:rgba(250,246,237,.86);
border:1px solid rgba(106,94,73,.25); border-radius:3px;
}
.ph.dark{
background:
repeating-linear-gradient(135deg, #2a2419 0 16px, #241f15 16px 32px);
}
.ph.dark .lbl{ color:#cdc3ad; background:rgba(20,16,10,.55); border-color:rgba(205,195,173,.25); }
.ph.green{ background:repeating-linear-gradient(135deg,#43512f 0 16px,#3b4729 16px 32px); }
.ph.green .lbl{ color:#dfe3cf; background:rgba(20,26,12,.5); border-color:rgba(223,227,207,.25); }
.ph.clay{ background:repeating-linear-gradient(135deg,#9d5736 0 16px,#8c4d2f 16px 32px); }
.ph.clay .lbl{ color:#f4e3d6; background:rgba(40,18,8,.45); border-color:rgba(244,227,214,.3); }
/* real photo filling any .ph box (clipped to its radius via .ph overflow:hidden) */
.ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
/* once a real photo fills the box, drop the placeholder stripes + vignette so nothing peeks at the rounded corners */
.ph:has(> .ph-img){ background:none; }
.ph:has(> .ph-img)::after{ display:none; }
/* ---------- shared photo-backed closing CTA ---------- */
/* Drop a real photo in by replacing the .ph contents:
![]()
(NOT card-header
or linked images, NOT full-bleed background/hero images). Bound by the shared lightbox in site.js. */
.zoomable{ cursor:zoom-in; }
.ph > .ph-img.zoomable{ transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .25s; }
.ph:has(> .ph-img.zoomable):hover > .ph-img.zoomable{ transform:scale(1.04); filter:brightness(1.04); }
.ph:has(> .ph-img.zoomable){ cursor:zoom-in; }
.zoomable:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
/* shared "enlarge" affordance — a magnifier chip that fades in on hover over any
enlargeable image (shared .zoomable photos + Project gallery .g-thumb). On touch
devices (no hover) it stays softly visible so the cue is never hidden. */
.ph:has(> .ph-img.zoomable)::before,
.g-thumb::before{
content:""; position:absolute; top:10px; right:10px; z-index:4;
width:34px; height:34px; border-radius:50%;
background:rgba(20,16,10,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf6ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
opacity:0; transform:scale(.82); transition:opacity .25s, transform .25s; pointer-events:none;
}
.ph:has(> .ph-img.zoomable):hover::before,
.g-thumb:hover::before,
.g-thumb:focus-visible::before{ opacity:1; transform:scale(1); }
@media (hover:none){
.ph:has(> .ph-img.zoomable)::before,
.g-thumb::before{ opacity:.92; transform:scale(1); }
}
.pd-body{ display:grid; grid-template-columns:1fr 350px; gap:clamp(36px,5vw,72px); align-items:start; padding-block:clamp(48px,7vh,84px); }
.pd-prose h2{ font-size:clamp(25px,2.7vw,36px); margin:0 0 16px; }
.pd-prose h3{ font-family:var(--serif); font-weight:500; font-size:23px; margin:36px 0 10px; color:var(--ink); }
.pd-prose p{ color:var(--ink-soft); font-size:16.5px; line-height:1.78; margin:0 0 1.15em; max-width:62ch; }
.pd-prose .block + .block{ margin-top:42px; }
.pd-aside{ margin:42px 0 0; padding:26px 0; border-block:1px solid var(--line); font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.5; color:var(--brown); max-width:54ch; }
.pd-side{ display:flex; flex-direction:column; gap:18px; position:sticky; top:98px; }
.pd-card{ background:var(--ivory); border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
.pd-card h4{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); margin:0 0 16px; }
.pd-facts{ list-style:none; margin:0; padding:0; }
.pd-facts li{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line); font-size:14.5px; }
.pd-facts li:first-child{ border-top:0; padding-top:0; }
.pd-facts .k{ color:var(--taupe); } .pd-facts .v{ font-weight:600; text-align:right; }
.pd-give{ background:var(--ink); color:#ece2d2; border-color:var(--line-dark); }
.pd-give h4{ color:var(--gold); }
.pd-give p{ font-size:14.5px; color:#cfc4b0; margin:0 0 18px; line-height:1.6; }
.pd-give .btn{ width:100%; }
.pd-acts{ background:var(--paper-2); }
.pd-acts .plist{ list-style:none; margin:clamp(28px,4vh,40px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.pd-acts .plist li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-soft); padding:6px 0; }
.pd-acts .plist .ck{ width:24px; height:24px; border-radius:7px; flex:none; display:grid; place-items:center; font-size:12px; margin-top:1px; }
.pd-band{ background:var(--ink); color:#ece2d2; }
.pd-band .pq{ font-family:var(--serif); font-style:italic; font-size:clamp(26px,3vw,40px); line-height:1.25; color:#fdf8ef; max-width:26ch; margin:0; }
.pd-band .by{ margin-top:22px; margin-bottom:0; font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--gold); }
.pd-statrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:12px; overflow:hidden; }
.pd-statrow .c{ background:var(--ink); padding:34px 30px; }
.pd-statrow b{ font-family:var(--serif); font-size:clamp(30px,3.4vw,46px); font-weight:500; color:#fdf8ef; display:block; line-height:1; }
.pd-statrow span{ font-size:14px; color:#cfc4b0; margin-top:12px; display:block; max-width:22ch; }
.pd-related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:clamp(32px,4vh,46px); }
.rcard{ background:var(--ivory); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; }
.rcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -32px rgba(33,28,21,.5); }
/* ============================================================
CLICKABLE CARDS — make the whole card a link target.
Each card keeps its existing image/CTA ; we stretch that
link across the card (or add a .card-overlink overlay), and
lift any independent buttons above it so they stay clickable.
============================================================ */
.proj, .note, .pcard, .feat-proj, .rcard, .proj-row{ position:relative; }
/* full-card overlay link (used where a card has no image link) */
.card-overlink{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
/* stretch an existing single link across its whole card */
.pcard > .card-img::after,
.feat-proj > .card-img::after,
.note > .textlink::after,
.rcard .rc-foot .textlink::after,
.rcard .rc-gift-foot > .btn::after{ content:""; position:absolute; inset:0; z-index:1; }
/* the gift button's ::after is a card-wide overlay link; its own :hover transform would
make the button the ::after containing block, snapping the overlay down to button size
and back every frame (cursor flickered pointer↔arrow). Keep it stable — the card lifts anyway. */
.rcard .rc-gift-foot > .btn:hover{ transform:none; }
/* keep multi-button rows above the card-wide link */
.pcard .pc-actions, .feat-proj .fp-actions,
.proj .proj-actions, .proj-row .pr-actions{ position:relative; z-index:2; }
/* hover affordance for the lighter (borderless) note cards */
.note h3{ transition:color .18s ease; }
.note:hover h3{ color:var(--clay); }
.note .arr, .rcard .arr{ display:inline-block; transition:transform .18s ease; }
.note:hover .textlink .arr, .rcard:hover .arr{ transform:translateX(3px); }
.rcard .ph{ aspect-ratio:16/9; height:auto; }
.pd-related-grid .rcard:not(.rc-overlaycard):has(.rc-gift-foot) .ph{ aspect-ratio:1/1; }
/* gift shown as a full-bleed image with overlay (evens height against story cards) */
.pd-related-grid .rcard.rc-overlaycard{ position:relative; min-height:300px; }
.pd-related-grid .rcard.rc-overlaycard .ph{ position:absolute; inset:0; aspect-ratio:auto; height:100%; width:100%; border-radius:inherit; }
.rc-ov{ position:relative; z-index:2; margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:13px; padding:60px 26px 24px; color:#faf6ed;
background:linear-gradient(to top, rgba(20,15,9,.95) 0%, rgba(20,15,9,.88) 30%, rgba(20,15,9,.62) 62%, rgba(20,15,9,.22) 86%, rgba(20,15,9,0) 100%); }
/* make the whole gift card clickable: the button's card-wide ::after was trapped by .rc-ov's
positioning, limiting the hit area to the overlay. Drop the image behind (isolated) and let
.rc-ov go static so the ::after spans the full .rcard. One accessible link, button stays visible. */
.pd-related-grid .rcard.rc-overlaycard{ isolation:isolate; }
.pd-related-grid .rcard.rc-overlaycard .ph{ z-index:-1; }
.pd-related-grid .rcard.rc-overlaycard .rc-ov{ position:static; }
.rc-ov h3{ color:#fdf8ef; margin:0; }
.rc-ov .rc-gift-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; align-self:stretch; }
.pd-related-grid .rcard.rc-overlaycard .rc-gift-price{ color:#fdf8ef; }
.pd-related-grid .rcard.rc-overlaycard .rc-gift-price small{ color:#d8cdba; }
.rcard .rc-body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.rcard .rc-tags{ display:flex; gap:8px; margin-bottom:13px; flex-wrap:wrap; }
.rcard .rc-meta{ display:flex; gap:10px; align-items:center; margin-bottom:12px; font-size:12px; letter-spacing:.04em; }
.rcard .rc-meta .cat{ color:var(--clay); font-weight:700; text-transform:uppercase; }
.rcard .rc-meta .dt{ color:var(--taupe); }
.rcard h3{ font-size:21px; margin-bottom:9px; line-height:1.18; }
.rcard p{ font-size:14px; color:var(--brown); margin-bottom:18px; }
.rcard .rc-foot{ margin-top:auto; }
.rcard .nums{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.rcard .nums b{ font-family:var(--serif); font-size:18px; font-weight:600; }
.rcard .nums .muted{ color:var(--taupe); }
.rcard .rc-actions{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.rcard .rc-gift-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.rcard .rc-gift-price{ font-family:var(--serif); font-size:25px; font-weight:600; color:var(--ink); flex:none; line-height:1; }
.rcard .rc-gift-price small{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--taupe); display:block; margin-top:4px; }
.pd-more{ background:var(--paper-2); }
.moregrid{ display:flex; flex-wrap:wrap; justify-content:start; gap:14px; margin-top:clamp(28px,4vh,40px); }
.morecard{ flex:0 1 calc(33.333% - 9.5px); display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--ivory); border:1px solid var(--line); border-radius:14px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.morecard:hover{ transform:translateY(-3px); border-color:var(--clay); box-shadow:0 18px 36px -26px rgba(33,28,21,.5); }
.morecard .mn{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--clay); flex:none; }
.morecard b{ font-family:var(--serif); font-weight:500; font-size:18px; display:block; line-height:1.12; }
.morecard span{ font-size:12.5px; color:var(--taupe); }
.morecard.cur{ opacity:.5; pointer-events:none; }
/* fuller related card (e.g. gift “you might also like”) */
.moregrid .relcard{ flex:0 1 calc(33.333% - 9.5px); display:flex; flex-direction:column; background:var(--ivory); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .3s, box-shadow .3s; text-decoration:none; color:inherit; }
.relcard:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -32px rgba(33,28,21,.5); }
.relcard .ph{ aspect-ratio:1/1; height:auto; }
.relcard-b{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; }
.relcard-b .pill{ align-self:flex-start; }
.relcard-b b{ font-family:var(--serif); font-weight:500; font-size:18px; line-height:1.16; }
.relcard-price{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }
@media (max-width:900px){
.pd-body{ grid-template-columns:1fr; }
.pd-side{ position:static; flex-direction:row; flex-wrap:wrap; }
.pd-card{ flex:1; min-width:240px; }
.moregrid .morecard, .moregrid .relcard{ flex-basis:calc(50% - 7px); }
}
@media (max-width:620px){
.pd-acts .plist{ grid-template-columns:1fr; }
.pd-related-grid{ grid-template-columns:1fr; }
.pd-statrow{ grid-template-columns:1fr; }
.moregrid .morecard, .moregrid .relcard{ flex-basis:100%; }
.pd-side{ flex-direction:column; }
}
/* ============================================================
PROJECT STATUS — universal color system + urgent pulse
============================================================ */
.status.active{ color:var(--clay-deep); } .status.active .dot{ background:var(--clay); }
.status.urgent{ color:#c0392b; } .status.urgent .dot{ background:#c0392b; }
.status.funded{ color:#8a6420; } .status.funded .dot{ background:var(--gold); }
.status.completed{ color:var(--green-deep); } .status.completed .dot{ background:var(--green); }
/* pulsing urgent dot — flagship feature cards & the project detail fund card */
.status.urgent .dot{ position:relative; }
.feat-proj .status.urgent .dot::after,
.fc-status .status.urgent .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#c0392b; animation:dotPulse 1.7s ease-out infinite; }
@keyframes dotPulse{ 0%{ transform:scale(1); opacity:.65; } 70%{ transform:scale(3.2); opacity:0; } 100%{ transform:scale(3.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){
.feat-proj .status.urgent .dot::after,
.fc-status .status.urgent .dot::after{ animation:none; }
}
/* ============================================================
GIFT CATALOG — shared (catalog + item detail pages)
============================================================ */
.is-hidden{ display:none !important; }
/* gift grid + cards (shared so detail pages can show related-as-cards if needed) */
.gift-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gcard{ background:var(--ivory); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; }
.gcard:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -34px rgba(33,28,21,.5); }
.gcard .ph{ aspect-ratio:1/1; }
.gc-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.gc-tags{ display:flex; gap:7px; margin-bottom:13px; flex-wrap:wrap; }
.gcard h3{ font-size:20px; margin-bottom:8px; line-height:1.16; }
.gcard h3 a{ transition:color .18s; } .gcard h3 a:hover{ color:var(--clay-deep); }
.gcard .impact{ font-size:14px; color:var(--brown); margin-bottom:18px; }
.gc-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.gc-price{ font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink); flex:none; }
.gc-price small{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--taupe); display:block; line-height:1; margin-top:2px; }
.gc-control{ flex:none; }
.gc-control .add-btn{ font-size:14px; padding:12px 20px; }
/* stepper */
.stepper{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--clay); border-radius:999px; padding:4px; background:rgba(171,93,58,.06); }
.stepper .st-btn{ width:30px; height:30px; border-radius:50%; border:0; background:var(--clay); color:#fdf6ee; font-size:17px; font-weight:700; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.stepper .st-btn:hover{ background:var(--clay-deep); }
.stepper .st-n{ font-size:12.5px; font-weight:700; color:var(--clay-deep); padding:0 8px; white-space:nowrap; }
.stepper.sm{ padding:3px; } .stepper.sm .st-btn{ width:26px; height:26px; font-size:15px; } .stepper.sm .st-n{ padding:0 6px; }
/* basket toggle button */
.basket-toggle{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:13.5px; padding:10px 17px; border-radius:999px; border:1px solid var(--clay); color:var(--clay-deep); background:rgba(171,93,58,.06); cursor:pointer; transition:all .18s; }
.basket-toggle:hover{ background:var(--clay); color:#fdf6ee; }
.basket-toggle .bdot{ min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--clay); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
.basket-toggle:hover .bdot{ background:#fff; color:var(--clay-deep); }
/* floating basket bar */
.basket-bar{ position:fixed; left:50%; bottom:16px; transform:translate(-50%,140%); z-index:60; display:flex; align-items:center; gap:18px; padding:12px 14px 12px 24px; background:var(--ink); color:#fdf8ef; border-radius:999px; box-shadow:0 24px 50px -16px rgba(0,0,0,.5); transition:transform .4s cubic-bezier(.2,.8,.3,1); }
.basket-bar.show{ transform:translate(-50%,0); }
.basket-bar .bb-text b{ font-family:var(--serif); font-size:18px; font-weight:600; }
.basket-bar .bb-text span{ font-size:13px; color:#cfc4b0; margin-left:10px; }
.basket-bar .bb-go{ font-family:var(--sans); font-weight:700; font-size:14px; padding:12px 22px; border-radius:999px; background:var(--clay); color:#fdf6ee; border:0; cursor:pointer; transition:background .2s; white-space:nowrap; }
.basket-bar .bb-go:hover{ background:var(--clay-deep); }
/* basket drawer */
.basket-scrim{ position:fixed; inset:0; background:rgba(18,13,8,.5); opacity:0; pointer-events:none; transition:opacity .35s; z-index:70; }
.basket-scrim.show{ opacity:1; pointer-events:auto; }
.basket-drawer{ position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); background:var(--paper); z-index:80; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; }
.basket-drawer.open{ transform:none; box-shadow:-30px 0 60px -30px rgba(0,0,0,.5); }
.bk-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--line); }
.bk-head h2{ font-size:24px; }
.bk-close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--ivory); font-size:20px; cursor:pointer; color:var(--brown); display:grid; place-items:center; transition:all .18s; }
.bk-close:hover{ border-color:var(--clay); color:var(--ink); }
.bk-body{ flex:1; overflow-y:auto; padding:8px 26px; }
.bk-empty{ text-align:center; color:var(--taupe); padding:70px 20px; }
.bk-empty .em{ font-size:34px; margin-bottom:14px; }
.bk-empty .em svg{ width:42px; height:42px; }
.bk-item{ display:flex; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.bk-ph{ width:52px; height:52px; border-radius:10px; flex:none; background:repeating-linear-gradient(135deg,#e6dbc6 0 8px,#e0d4bd 8px 16px); }
.bk-info{ flex:1; min-width:0; } .bk-info b, .bk-info .bk-title{ font-family:var(--serif); font-weight:600; font-size:15.5px; display:block; line-height:1.2; } .bk-info span{ font-size:12.5px; color:var(--taupe); }
.bk-info .bk-title{ color:var(--ink); text-decoration:none; transition:color .15s; } .bk-info .bk-title:hover{ color:var(--clay-deep); }
.bk-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.bk-line{ font-family:var(--serif); font-weight:600; font-size:15px; }
.bk-rm{ background:none; border:0; color:var(--taupe); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; padding:0; }
.bk-rm:hover{ color:var(--clay-deep); }
.bk-foot{ border-top:1px solid var(--line); padding:22px 26px calc(34px + env(safe-area-inset-bottom)); background:var(--ivory); }
.bk-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.bk-total .tl{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--taupe); font-weight:700; }
.bk-total .tv{ font-family:var(--serif); font-size:30px; font-weight:600; }
.bk-foot .give{ width:100%; margin-top:14px; }
.bk-foot .note{ font-size:12px; color:var(--taupe); text-align:center; margin-top:12px; line-height:1.5; }
/* thank-you toast */
.give-thanks{ position:fixed; left:50%; bottom:30px; transform:translate(-50%,160%); z-index:90; background:var(--green-deep); color:#f4f7ec; padding:16px 26px; border-radius:14px; font-weight:600; font-size:15px; box-shadow:0 20px 44px -16px rgba(0,0,0,.5); transition:transform .45s cubic-bezier(.2,.8,.3,1); display:flex; align-items:center; gap:12px; }
.give-thanks .gk{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; }
.give-thanks.show{ transform:translate(-50%,0); }
/* ---- gift item DETAIL pages ---- */
.gd-main{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.5vw,64px); align-items:start; padding-block:clamp(40px,6vh,72px); min-width:0; }
.gd-media{ position:sticky; top:98px; min-width:0; }
.gd-media .ph{ aspect-ratio:1/1; border-radius:18px; }
/* stewardship commitment (gift detail) */
.gd-steward{ background:var(--paper); }
.gd-steward-band{ display:grid; grid-template-columns:288px 1fr; gap:clamp(28px,4vw,54px); align-items:start; background:var(--ivory); border:1px solid var(--line); border-radius:20px; padding:clamp(32px,4vw,52px); box-shadow:0 30px 60px -44px rgba(33,28,21,.5); }
.gd-steward-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(194,149,74,.16); color:#a87a2e; flex:none; }
.gd-steward-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gd-steward-top{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.gd-steward-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); margin:0; white-space:nowrap; }
.gd-steward-h{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.4vw,30px); color:#a87a2e; letter-spacing:-.01em; line-height:1.1; }
.gd-steward-text p{ font-family:var(--serif); font-style:italic; font-size:clamp(15.5px,1.35vw,18px); line-height:1.72; color:var(--brown); margin:0 0 22px; text-wrap:pretty; }
.gd-steward-text p:last-child{ margin-bottom:0; }
@media (max-width:760px){ .gd-steward-band{ grid-template-columns:1fr; gap:22px; } }
.gd-media .cap{ display:flex; justify-content:space-between; gap:16px; margin-top:13px; font-size:12.5px; color:var(--taupe); flex-wrap:wrap; }
.gd-buy h1{ font-size:clamp(30px,3.4vw,46px); margin-top:14px; max-width:18ch; }
.gd-tagline{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.7vw,23px); color:var(--brown); margin-top:14px; max-width:32ch; line-height:1.4; }
.gd-pricerow{ display:flex; align-items:baseline; gap:14px; margin-top:26px; }
.gd-price{ font-family:var(--serif); font-size:46px; font-weight:600; line-height:1; }
.gd-price-note{ font-size:13px; color:var(--taupe); }
.gd-actions{ display:flex; align-items:center; gap:18px; margin-top:24px; flex-wrap:wrap; }
.gd-actions .gc-control .add-btn{ padding:16px 32px; font-size:16px; }
.gd-trust{ display:flex; flex-direction:column; gap:11px; margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.gd-trust .tr{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--brown); }
.gd-trust .tk{ width:22px;height:22px;border-radius:50%;flex:none;background:rgba(81,97,63,.16);color:var(--green-deep);display:grid;place-items:center;font-size:12px;margin-top:1px; }
.gd-share{ display:flex; gap:14px; align-items:center; margin-top:24px; font-size:13px; color:var(--taupe); }
.gd-share a{ color:var(--taupe); font-weight:600; } .gd-share a:hover{ color:var(--clay-deep); }
.gd-impact{ background:var(--paper-2); }
.gd-impact-grid{ display:grid; grid-template-columns:1fr 350px; gap:clamp(36px,5vw,72px); align-items:start; }
.gd-impact-prose h2{ font-size:clamp(25px,2.7vw,34px); margin:0; }
.gd-impact-prose p{ color:var(--ink-soft); font-size:16.5px; line-height:1.78; margin:18px 0 0; max-width:60ch; }
.gd-provides{ background:var(--ivory); border:1px solid var(--line); border-radius:16px; padding:28px; position:sticky; top:98px; }
.gd-provides h4{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); margin:0 0 16px; }
.gd-provides ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.gd-provides li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); }
.gd-provides .ck{ width:22px;height:22px;border-radius:6px;flex:none;background:rgba(171,93,58,.13);color:var(--clay-deep);display:grid;place-items:center;font-size:11px;margin-top:1px; }
.gd-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,4vh,40px); }
.gd-step{ background:var(--ivory); border:1px solid var(--line); border-radius:14px; padding:28px; }
.gd-step .sn{ font-family:var(--serif); font-size:15px; color:var(--clay); font-weight:600; display:inline; margin-right:11px; }
.gd-finenote{ margin-top:clamp(22px,3vh,32px); max-width:78ch; font-size:12.5px; line-height:1.7; color:var(--taupe); text-wrap:pretty; }
.gd-step h4{ font-size:19px; display:inline; margin:0; }
.gd-step p{ font-size:14px; color:var(--brown); margin:14px 0 0; line-height:1.6; }
@media (max-width:980px){ .gift-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:880px){ .gd-main{ grid-template-columns:1fr; } .gd-media{ position:static; } .gd-stage .ph{ aspect-ratio:4/3; } .gd-impact-grid{ grid-template-columns:1fr; } .gd-provides{ position:static; } .gd-steps{ grid-template-columns:1fr; } }
@media (max-width:620px){ .gift-grid{ grid-template-columns:1fr; } .basket-bar{ left:16px; right:16px; transform:translateY(160%); width:auto; } .basket-bar.show{ transform:none; } .basket-bar .bb-go{ margin-left:auto; } }
/* ============================================================
MEGA MENU (desktop dropdowns + mobile drawer)
============================================================ */
.nav-top{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.01em; background:none; border:0; cursor:pointer; color:inherit; padding:4px 0; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; text-decoration:none; transition:opacity .2s; }
.nav-top:hover{ opacity:.6; }
.nav-top .caret{ font-size:9px; opacity:.65; transition:transform .22s; margin-top:1px; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item.open .nav-top .caret{ transform:rotate(180deg); }
.nav-top.current{ position:relative; }
.nav-top.current::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--clay); border-radius:2px; }
/* dropdown panel (dark) */
.mega{ position:absolute; top:calc(100% + 16px); left:-25px; min-width:250px; background:var(--ink); color:#ece2d2; border:1px solid var(--line-dark); border-radius:16px; padding:22px; box-shadow:0 40px 80px -34px rgba(0,0,0,.7); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .2s; z-index:55; }
.mega.right{ left:auto; right:-25px; }
.mega.center{ left:50%; right:auto; transform:translate(-50%,8px); }
.nav-item.open .mega.center{ transform:translateX(-50%); }
.mega::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-item.open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.mega-cols{ display:flex; gap:26px; }
.mega-col{ min-width:200px; display:flex; flex-direction:column; gap:1px; }
.mega-h{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; display:block; margin-bottom:10px; min-height:14px; }
.mega-col .mega-h{ padding-left:16px; }
.mega:not(.gift) > .mega-all{ padding-left:16px; }
.mega .mega-link{ display:block; padding:9px 16px; border-radius:10px; transition:background .15s; }
.mega .mega-link:hover{ background:var(--clay-deep); opacity:1; }
.mega-link b{ display:block; font-family:var(--sans); font-weight:600; font-size:16px; color:#fdf8ef; line-height:1.15; transition:color .15s; }
.mega-link span{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; letter-spacing:.04em; color:#897f6c; line-height:1.1; transition:color .15s; }
.mega-link:hover b{ color:#ffffff; }
.mega-link:hover span{ color:#d7c7bd; }
.mega-all{ display:inline-block; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-dark); font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--gold); width:100%; }
.mega-all:hover{ color:#fdf8ef; }
/* universal share toast */
.share-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,12px); background:var(--ink); color:#fdf8ef; font-size:14px; font-weight:600; padding:13px 22px; border-radius:999px; box-shadow:0 18px 40px -16px rgba(18,13,8,.6); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:200; max-width:88vw; }
.share-toast.show{ opacity:1; transform:translate(-50%,0); }
[data-net]{ cursor:pointer; }
[data-net].is-copied{ color:#16a34a !important; }
/* what-we-do featured panel (the farm) */
.mega-split{ display:flex; gap:26px; align-items:stretch; }
.mega-feature{ display:flex; flex-direction:column; min-width:275px; max-width:275px; padding-left:26px; border-left:1px solid var(--line-dark); }
.mega-fbig{ display:block; background:rgba(81,97,63,.12); border:1px solid var(--line-dark); border-radius:12px; overflow:hidden; transition:border-color .18s, background .18s; }
.mega .mega-fbig:hover{ border-color:#6f8456; opacity:1; }
.mega-fbig-ph{ display:block; height:84px; background:linear-gradient(135deg,#566641,#3c4a2e); position:relative; }
.mega-fbig-ph.has-img{ height:125px; background:#3c4a2e center 82%/cover no-repeat; }
.mega-fbig-ph.has-img::after{ display:none; }
.mega-fbig-ph::after{ content:"\1F33E"; position:absolute; right:11px; bottom:8px; font-size:20px; opacity:.9; }
.mega-fbig-t{ display:block; padding:13px 14px 15px; }
.mega-fbig-t b{ font-family:var(--serif); font-weight:500; font-size:16px; color:#fdf8ef; display:block; line-height:1.18; }
.mega-fbig-t span{ font-size:12.5px; color:#b3a890; display:block; margin-top:3px; }
.mega-fnote{ font-size:12px; color:#9a8e78; line-height:1.5; margin-top:13px; }
.m-link.m-feat{ display:flex; align-items:baseline; gap:8px; }
.m-link.m-feat span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; }
/* gift mega */
.mega.gift{ width:min(700px,94vw); }
.mega-gift{ display:grid; grid-template-columns:2.5fr 1fr; gap:26px; }
.mega-feat{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mega.gift.no-cats .mega-gift{ grid-template-columns:1fr; }
.mega.gift.no-cats .mega-feat{ grid-template-columns:repeat(3,1fr); }
.mega-fcard{ display:flex; flex-direction:column; background:rgba(250,246,237,.05); border:1px solid var(--line-dark); border-radius:11px; overflow:hidden; transition:border-color .18s, background .18s; }
.mega .mega-fcard:hover{ border-color:var(--clay); opacity:1; }
.mega-fcard .ph{ aspect-ratio:16/9; }
.mega.gift-square .mega-fcard .ph{ aspect-ratio:1/1; }
.mega-fcard-t{ display:flex; flex-direction:column; flex:1; padding:10px 12px 12px; }
.mega-fcard-t b{ font-family:var(--sans); font-weight:600; font-size:15px; color:#fdf8ef; display:block; line-height:1.25; white-space:normal; text-wrap:pretty; }
.mega-fcard .pr{ margin-top:auto; padding-top:6px; font-size:12.5px; color:var(--gold); font-weight:700; }
.mega-cats{ display:flex; flex-direction:column; gap:1px; }
.mega-cat{ display:block; font-size:14px; font-weight:500; letter-spacing:.01em; line-height: 1.25; color:#e3d9c8; padding:7px 11px; border-radius:9px; transition:background .15s, color .15s; }
.mega .mega-cat:hover{ background:var(--clay-deep); color:#fff; opacity:1; }
/* hamburger */
.nav-burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid transparent; background:none; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:0; }
.nav-burger span{ display:block; width:19px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s, opacity .2s, background .3s; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* mobile drawer */
.nav-mobile{ position:fixed; inset:78px 0 0; background:var(--paper); z-index:44; transform:translateX(100%); visibility:hidden; transition:transform .35s cubic-bezier(.2,.8,.3,1), visibility .35s; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.nav-mobile.open{ transform:none; visibility:visible; }
.nav-mobile-inner{ padding:14px var(--gut) 48px; }
.m-sec{ border-bottom:1px solid var(--line); }
.m-row{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 4px; font-family:var(--sans); font-size:20px; font-weight:600; letter-spacing:.01em; line-height:1.3; color:var(--ink); background:none; border:0; cursor:pointer; text-align:left; }
a.m-row{ text-decoration:none; }
.m-caret{ font-size:24px; color:var(--clay); transition:transform .25s; font-weight:300; line-height:1; }
.m-sec.open .m-caret{ transform:rotate(45deg); }
.m-panel{ max-height:0; overflow:hidden; transition:max-height .32s ease; }
.m-panel-in{ padding:2px 4px 16px; }
.m-link{ display:block; padding:11px 12px; border-radius:9px; color:var(--brown); font-size:15px; }
.m-link:hover{ background:var(--paper-2); }
.m-link b{ color:var(--ink); font-family:var(--sans); font-size:15.5px; font-weight:600; }
.m-cta{ margin-top:24px; width:100%; }
@media (max-width:1320px){
.nav-links{ display:none; }
.nav-burger{ display:inline-flex; }
}
@media (max-width:600px){
.nav-inner{ gap:14px; }
.nav .wrap{ padding-inline:14px; }
.brand-logo{ height:42px; }
.nav-cta{ gap:10px; }
}
@media (max-width:380px){
.brand-logo{ height:38px; }
}
/* ---- ASP.NET MVC unobtrusive-validation output (shared across form pages) ---- */
.field-validation-valid{ display:none; }
.field-validation-error{ display:block; margin-top:7px; font-size:13px; color:#b23b2e; line-height:1.4; }
.input-validation-error{ border-color:#b23b2e !important; box-shadow:inset 0 0 0 1px #b23b2e !important; background:rgba(178,59,46,.03); }
.validation-summary-errors{ margin-top:6px; }
.validation-summary-errors ul{ margin:0; padding-left:18px; }
.validation-summary-errors li{ font-size:13.5px; color:#b23b2e; line-height:1.5; }
.validation-summary-valid{ display:none; }
/* ---- Button busy/spinner state (filled buttons; label hidden, width preserved) ---- */
.btn-busy{ color:transparent !important; pointer-events:none; position:relative; }
.btn-busy::after{ content:""; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(253,246,238,.4); border-top-color:#fdf6ee; border-radius:50%; animation:btn-spin .6s linear infinite; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .btn-busy::after{ animation-duration:1.4s; } }