/* =========================================
   Hope58 — site.css
   Palette locked from live site CSS.
   Type: Fraunces (heads) + Inter (body)
   ========================================= */

/* Self-hosted variable fonts (latin subset). One file per family covers every
   weight via the wght axis — no third-party request, no fonts.gstatic.com hit,
   no German-court Google Fonts liability. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/fraunces-variable-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-variable-latin.woff2') format('woff2');
}

:root{
  --teal:#2A5764;
  --teal-dk:#1b4150;
  --gold:#F0AD3D;
  --gold-hover:#d99a2e;
  --orange:#E87B05;
  --burnt:#993702;
  --cream:#F1F2CA;
  --sky:#EEF7F9;
  --ink:#101010;
  --ink-soft:#3a3a3a;
  --line:#e6e6e6;
  --paper:#FFFFFF;
  --max:1180px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.65 'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--paper);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--burnt);text-decoration:none;transition:color .2s}
a:hover{color:var(--orange)}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;z-index:1000000}

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

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:600 12px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.12em;color:var(--burnt);margin:0 0 12px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:16px}
.site-header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--teal)}
.site-header .brand img{height:44px;width:auto}
.site-header .brand .wordmark{display:none;font:700 18px 'Fraunces',serif;color:var(--teal)}
@media(min-width:980px){.site-header .brand .wordmark{display:inline}}
.primary-nav{display:none}
.primary-nav a{color:var(--ink);font:500 15px 'Inter',sans-serif;text-decoration:none;padding:8px 14px;border-radius:6px}
.primary-nav a:hover{background:var(--sky);color:var(--teal)}
.primary-nav details{position:relative;display:inline-block}
.primary-nav summary{list-style:none;cursor:pointer;padding:8px 14px;border-radius:6px;color:var(--ink);font:500 15px 'Inter',sans-serif;display:inline-flex;align-items:center;gap:4px}
.primary-nav summary::-webkit-details-marker{display:none}
.primary-nav summary::after{content:"\25BE";font-size:10px;color:var(--burnt)}
.primary-nav summary:hover{background:var(--sky);color:var(--teal)}
.primary-nav details[open] summary{background:var(--sky);color:var(--teal)}
.primary-nav .submenu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,0.08);padding:8px;min-width:240px}
.primary-nav .submenu a{display:block;padding:10px 14px;border-radius:6px}
@media(min-width:880px){.primary-nav{display:flex;align-items:center;gap:4px}}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;font:700 14px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.06em;border-radius:4px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:all .2s;min-height:44px}
.btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--ink);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,0.8)}
.btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:#fff;color:#fff}
.btn-ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-ghost:hover{background:var(--teal);color:#fff}
.btn-donate{padding:10px 20px;min-height:0}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:var(--teal);cursor:pointer}
.nav-toggle svg{width:24px;height:24px}
@media(min-width:880px){.nav-toggle{display:none}}
.mobile-nav{display:none;background:#fff;border-bottom:1px solid var(--line);padding:8px 0 16px}
.mobile-nav.open{display:block}
body.nav-open{overflow:hidden}
.mobile-nav a{display:block;padding:12px var(--gut);font:500 16px 'Inter',sans-serif;color:var(--ink);text-decoration:none;border-bottom:1px solid #f3f3f3}
.mobile-nav a:hover{background:var(--sky);color:var(--teal)}

/* ===== Home hero with Ken Burns slideshow ===== */
.hero{position:relative;height:88vh;min-height:560px;max-height:880px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
/* On mobile, fill the visible viewport. svh = "small viewport height", which
   is the visible area when the browser address bar is showing — eliminates
   the iOS Safari "vh is taller than what you can see" gotcha. Fallback to vh
   on older browsers. */
@media(max-width:880px){
  .hero{height:100vh;height:100svh;min-height:640px;max-height:none}
}
.hero .slides{position:absolute;inset:0;z-index:-2;background:var(--teal-dk)}
.hero .slide{position:absolute;inset:0;opacity:0;will-change:opacity}
.hero .slide:first-child{opacity:1}
.hero .slide{animation:hero-fade 32s ease-in-out infinite;animation-fill-mode:backwards}
/* Override global picture{display:contents} for the hero so the wrapper is an
   explicit positioned box. Without this, percentage heights on the inner img
   don't resolve reliably and slides render at the img's natural aspect ratio,
   leaving blank bars on the 16:9 slides since the first slide is 4:3. */
.hero .slide picture{display:block;position:absolute;inset:0;width:100%;height:100%}
.hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center 40%;will-change:transform;transform-origin:center}
/* First slide skips the 4% fade-in so the LCP image is opaque at first paint */
.hero .slide:nth-child(1){animation-delay:-1.28s}
.hero .slide:nth-child(2){animation-delay:8s}
.hero .slide:nth-child(3){animation-delay:16s}
.hero .slide:nth-child(4){animation-delay:24s}
.hero .slide:nth-child(1) img{animation:kb-zoom-in 32s ease-out infinite;animation-delay:-1.28s}
.hero .slide:nth-child(2) img{animation:kb-pan-left 32s ease-out infinite;animation-delay:8s}
.hero .slide:nth-child(3) img{animation:kb-zoom-out 32s ease-out infinite;animation-delay:16s}
.hero .slide:nth-child(4) img{animation:kb-pan-down 32s ease-out infinite;animation-delay:24s}

@keyframes hero-fade{0%{opacity:0}4%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
@keyframes kb-zoom-in{0%{transform:scale(1)}31%{transform:scale(1.15)}100%{transform:scale(1.15)}}
@keyframes kb-pan-left{0%{transform:scale(1.1) translate(2%,0)}31%{transform:scale(1.15) translate(-2%,1%)}100%{transform:scale(1.15) translate(-2%,1%)}}
@keyframes kb-zoom-out{0%{transform:scale(1.18)}31%{transform:scale(1.05)}100%{transform:scale(1.05)}}
@keyframes kb-pan-down{0%{transform:scale(1.1) translate(0,-2%)}31%{transform:scale(1.18) translate(1%,2%)}100%{transform:scale(1.18) translate(1%,2%)}}

@media (prefers-reduced-motion: reduce){
  .hero .slide{animation:none;opacity:0}
  .hero .slide:first-child{opacity:1}
  .hero .slide img{animation:none;transform:scale(1.02)}
}
.hero.paused .slide,.hero.paused .slide img{animation-play-state:paused}

.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,0.4) 0%,rgba(27,65,80,0.55) 50%,rgba(27,65,80,0.85) 100%);z-index:-1;pointer-events:none}
.hero .content{padding:120px 0 100px;max-width:780px;position:relative;z-index:1}
.hero .eyebrow{color:var(--gold)}
.hero h1{font:800 clamp(40px,6vw,68px)/1.05 'Fraunces',serif;margin:0 0 18px;color:#fff;letter-spacing:-0.01em;text-shadow:0 2px 24px rgba(0,0,0,0.25)}
.hero .lede{font:400 clamp(18px,2vw,22px)/1.5 'Inter',sans-serif;color:rgba(255,255,255,0.95);margin:0 0 32px;max-width:600px;text-shadow:0 1px 12px rgba(0,0,0,0.3)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

.hero-controls{position:absolute;bottom:24px;right:24px;display:flex;align-items:center;gap:12px;z-index:2}
.hero-dots{display:flex;gap:8px}
.hero-dots span{width:24px;height:3px;background:rgba(255,255,255,0.4);border-radius:2px;transition:background .4s}
.hero-dots span.active{background:var(--gold)}
.hero-pause{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.3);border-radius:50%;color:#fff;cursor:pointer;backdrop-filter:blur(4px)}
.hero-pause:hover{background:rgba(0,0,0,0.6);border-color:#fff}
.hero-pause svg{width:14px;height:14px}
.hero-pause .icon-play{display:none}
.hero.paused .hero-pause .icon-pause{display:none}
.hero.paused .hero-pause .icon-play{display:block}
@media(max-width:680px){.hero-controls{bottom:16px;right:16px;gap:8px}.hero-dots span{width:18px}}

/* ===== Interior page hero (smaller than home) ===== */
.page-hero{position:relative;background:var(--teal-dk);color:#fff;padding:120px 0 80px;overflow:hidden}
.page-hero.has-image::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,65,80,0.5) 0%,rgba(27,65,80,0.8) 100%);z-index:1}
.page-hero.has-image .bg{position:absolute;inset:0;z-index:0}
.page-hero.has-image .bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.page-hero .container{position:relative;z-index:2;max-width:880px}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font:800 clamp(36px,5.5vw,56px)/1.1 'Fraunces',serif;color:#fff;margin:0 0 16px;letter-spacing:-0.01em}
.page-hero .lede{font:400 clamp(17px,1.6vw,20px)/1.5 'Inter',sans-serif;color:rgba(255,255,255,0.92);margin:0 0 28px;max-width:680px}
.page-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ===== Breadcrumbs ===== */
.crumbs{background:var(--sky);padding:14px 0;font-size:13px;color:var(--ink-soft);border-bottom:1px solid #e1edf0}
.crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs li:not(:last-child)::after{content:"\203A";color:var(--burnt);margin-left:8px}
.crumbs a{color:var(--burnt);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink-soft)}

/* ===== Credibility strip ===== */
.cred{background:var(--teal-dk);color:#fff;padding:24px 0;border-top:1px solid rgba(255,255,255,0.1)}
.cred .grid{display:grid;grid-template-columns:1fr;gap:20px;text-align:center}
@media(min-width:680px){.cred .grid{grid-template-columns:repeat(4,1fr);text-align:left}}
.cred .item{display:flex;flex-direction:column;gap:2px}
.cred .label{font:600 11px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);margin:0}
.cred .value{font:600 15px/1.3 'Inter',sans-serif;color:#fff;margin:0}

/* ===== Section base ===== */
section{padding:80px 0}
@media(min-width:880px){section{padding:96px 0}}
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.section-head h2{font:700 clamp(32px,4vw,44px)/1.15 'Fraunces',serif;color:var(--teal);margin:0 0 16px;letter-spacing:-0.01em}
.section-head p{font-size:18px;color:var(--ink-soft);margin:0}

/* ===== Intro / two-column section ===== */
.intro{background:var(--cream)}
.intro .grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:880px){.intro .grid{grid-template-columns:1fr 1fr;gap:64px}}
.intro .eyebrow{color:var(--burnt)}
.intro h2{font:700 clamp(28px,3.5vw,38px)/1.15 'Fraunces',serif;color:var(--teal);margin:0 0 20px;letter-spacing:-0.01em}
.intro p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px}
.intro .verse{font:500 italic 18px/1.5 'Fraunces',serif;color:var(--burnt);border-left:3px solid var(--gold);padding-left:16px;margin-top:24px}
.intro .grid>div:has(picture){aspect-ratio:4/3;max-height:480px;border-radius:8px;overflow:hidden;width:100%}
.intro picture{display:block;width:100%;height:100%}
.intro img{width:100%;height:100%;object-fit:cover;object-position:center 25%}

/* ===== Programs (Editorial Stack cards) ===== */
.programs{background:var(--paper)}
.program-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:680px){.program-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.program-grid{grid-template-columns:repeat(3,1fr)}}
.prog-card{background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:0 0 0 rgba(0,0,0,0)}
.prog-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,0.08);border-color:var(--gold)}
.prog-card picture{display:block;width:100%;height:240px;overflow:hidden}
.prog-card img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.prog-card .body{padding:28px;display:flex;flex-direction:column;flex:1}
.prog-card .eyebrow{margin-bottom:10px}
.prog-card h3{font:700 22px/1.2 'Fraunces',serif;color:var(--teal);margin:0 0 12px}
.prog-card p{font-size:15px;color:var(--ink-soft);margin:0 0 20px;flex:1}
.prog-card .link{font:700 13px/1 'Inter',sans-serif;color:var(--burnt);text-transform:uppercase;letter-spacing:0.08em;display:inline-flex;align-items:center;gap:6px}
.prog-card .link::after{content:"\2192";transition:transform .2s}
.prog-card:hover .link::after{transform:translateX(4px)}

/* ===== Impact (Number Anchor cards) ===== */
.impact{background:var(--sky)}
.impact-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:680px){.impact-grid{grid-template-columns:repeat(3,1fr)}}
.impact-card{background:#fff;border:2px solid transparent;border-radius:14px;padding:36px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:border-color .25s,transform .25s}
.impact-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.impact-card .num{font:800 clamp(72px,8vw,96px)/0.9 'Fraunces',serif;color:var(--teal);margin:0 0 16px;letter-spacing:-0.04em}
.impact-card .num small{font-size:0.4em;color:var(--burnt);vertical-align:super;font-weight:700;letter-spacing:0;margin-left:0.25em}
.impact-card h3{font:700 19px/1.25 'Fraunces',serif;color:var(--ink);margin:0 0 10px}
.impact-card p{font-size:14px;color:var(--ink-soft);margin:0 0 18px;line-height:1.55;flex:1}
.impact-card .link{font:700 12px/1 'Inter',sans-serif;color:var(--burnt);text-transform:uppercase;letter-spacing:0.08em}

/* ===== Story (Offset Photo) ===== */
.story{background:var(--paper);padding-bottom:120px}
.story .section-head{margin-bottom:64px}
.story-card{display:block;text-decoration:none;color:var(--ink);max-width:980px;margin:0 auto;position:relative}
.story-card .video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;cursor:pointer}
.story-card .video picture{position:absolute;inset:0;width:100%;height:100%}
.story-card .video img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s}
.story-card .video:hover img{transform:scale(1.03);filter:brightness(0.92)}
.story-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;background:rgba(240,173,61,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.story-card .video:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--gold)}
.story-card .play svg{width:32px;height:32px;color:var(--ink);margin-left:4px}
/* Click-to-load YouTube facade — the .video element is now a <button>, so
   reset native button styling and add a visible focus ring for keyboard users. */
.story-card .video{padding:0;border:0;color:inherit;font:inherit;display:block}
.story-card .video:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.story-card .video iframe{width:100%;height:100%;border:0;display:block}

.story-card .content{margin:28px auto 0;max-width:720px;text-align:center}
.story-card .content .eyebrow{margin-bottom:8px}
.story-card .content h3{font:700 22px/1.3 'Fraunces',serif;color:var(--teal);margin:0 0 10px}
.story-card .content p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.6;max-width:560px;margin-left:auto;margin-right:auto}
.story-card .content .link{font:700 13px/1 'Inter',sans-serif;color:var(--burnt);text-transform:uppercase;letter-spacing:0.08em}
@media(max-width:680px){.story-card .content{padding:0}}

/* ===== Trust strip ===== */
.trust{background:var(--cream);padding:56px 0}
.trust .row{display:grid;grid-template-columns:1fr;gap:24px;text-align:center}
@media(min-width:680px){.trust .row{grid-template-columns:repeat(3,1fr);text-align:left}}
.trust .item{padding:0 8px}
.trust h3,.trust h4{font:700 16px/1.25 'Fraunces',serif;color:var(--teal);margin:0 0 6px}
.trust p{font-size:14px;color:var(--ink-soft);margin:0 0 8px;line-height:1.5}
.trust a{font:700 12px 'Inter',sans-serif;color:var(--burnt);text-transform:uppercase;letter-spacing:0.08em}

/* ===== Final CTA band ===== */
.cta-band{background:var(--teal);color:#fff;text-align:center;padding:80px 0}
.cta-band h2{font:800 clamp(32px,4.5vw,48px)/1.1 'Fraunces',serif;color:#fff;margin:0 0 16px;letter-spacing:-0.01em}
.cta-band p{font-size:18px;color:rgba(255,255,255,0.9);margin:0 0 32px;max-width:640px;margin-left:auto;margin-right:auto}
.cta-band .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== Scripture attribution (pages that quote a copyrighted translation) ===== */
.scripture-attribution{background:#f7f7f7;border-top:1px solid var(--line);padding:18px var(--gut);text-align:center}
.scripture-attribution p{margin:0 auto;max-width:880px;font-size:12px;line-height:1.55;color:var(--ink-soft)}
.scripture-attribution p strong{color:var(--ink)}

/* ===== Footer ===== */
.site-footer{background:var(--teal-dk);color:rgba(255,255,255,0.85);padding:64px 0 24px}
.site-footer .grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:680px){.site-footer .grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr}}
.site-footer .brand-col img{height:64px;width:auto;margin-bottom:16px}
.site-footer p{margin:0 0 12px;font-size:14px;line-height:1.6}
/* Footer column headings are <h2> (not <h5>) so the document heading order
   stays sequential — the main-content heading just before the footer is an
   <h2> in the CTA band, and jumping h2 → h5 fails the axe heading-order rule. */
.site-footer h2{font:700 13px 'Inter',sans-serif;color:#fff;text-transform:uppercase;letter-spacing:0.08em;margin:0 0 16px}
.site-footer a{color:rgba(255,255,255,0.85);text-decoration:none;font-size:14px;display:block;padding:6px 0}
.site-footer a:hover{color:var(--gold)}
.site-footer .social{display:flex;gap:12px;margin-top:16px}
.site-footer .social a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.3);border-radius:50%;padding:0}
.site-footer .social a:hover{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.site-footer .social svg{width:18px;height:18px}
.site-footer .newsletter input{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.08);color:#fff;border-radius:4px;font:14px 'Inter',sans-serif;margin-bottom:10px}
.site-footer .newsletter input::placeholder{color:rgba(255,255,255,0.6)}
.site-footer .newsletter button{width:100%;padding:12px;background:var(--gold);color:var(--ink);border:none;border-radius:4px;font:700 13px 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;transition:background .2s}
.site-footer .newsletter button:hover{background:var(--gold-hover)}
/* Consent disclaimer + privacy-policy link in the newsletter signup. Parent
   opacity is removed so the link inside meets WCAG AA contrast against the
   dark-teal footer (gold #F0AD3D at full alpha = ~5.3:1; with the prior
   opacity:0.7 it dropped to 3.51:1 and failed). */
.site-footer .newsletter small{display:block;font-size:12px;color:rgba(255,255,255,0.85);margin-top:8px;line-height:1.5}
/* Legal/contact row + build-meta: opacity replaced with explicit alpha on
   the color so contrast doesn't compound. Previous opacity:0.7 on both .legal
   and .build-meta multiplied to ~0.49 effective alpha, leaving the build
   string at 3.27:1 — under WCAG AA's 4.5:1 minimum. */
.site-footer .legal{border-top:1px solid rgba(255,255,255,0.1);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,0.85)}
.site-footer .legal a{display:inline;padding:0;margin-left:8px}
.site-footer .build-meta{font-variant-numeric:tabular-nums;font-size:11px;color:rgba(255,255,255,0.85);letter-spacing:0.02em;white-space:nowrap}

/* ===== Page-specific: About ===== */
.bio{background:var(--paper)}
.bio .grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:880px){.bio .grid{grid-template-columns:1fr 1.2fr}}
.bio .grid>div:has(picture){aspect-ratio:4/5;border-radius:8px;overflow:hidden;width:100%}
.bio picture{display:block;width:100%;height:100%}
.bio img{width:100%;height:100%;object-fit:cover}
.bio h2{font:700 clamp(28px,3.5vw,38px)/1.15 'Fraunces',serif;color:var(--teal);margin:0 0 20px}
.bio p{font-size:16px;color:var(--ink-soft);margin:0 0 14px;line-height:1.7}
.bio .pullquote{font:500 italic 22px/1.5 'Fraunces',serif;color:var(--teal);border-left:3px solid var(--gold);padding:8px 0 8px 20px;margin:28px 0}

.values{background:var(--sky)}
.values-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:680px){.values-grid{grid-template-columns:repeat(3,1fr)}}
.value-card{background:#fff;border-radius:14px;padding:32px;border:1px solid var(--line)}
.value-card .num{font:800 14px/1 'Inter',sans-serif;color:var(--burnt);text-transform:uppercase;letter-spacing:0.1em;margin:0 0 12px}
.value-card h3{font:700 22px/1.2 'Fraunces',serif;color:var(--teal);margin:0 0 12px}
.value-card p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.6}

/* ===== Page-specific: program pages ===== */
.program-intro{background:var(--paper)}
.program-intro .grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:880px){.program-intro .grid{grid-template-columns:1.1fr 1fr}}
.program-intro h2{font:700 clamp(28px,3.5vw,38px)/1.15 'Fraunces',serif;color:var(--teal);margin:0 0 20px}
.program-intro p{font-size:16px;color:var(--ink-soft);margin:0 0 14px;line-height:1.7}
.program-intro .grid>div:has(picture){aspect-ratio:4/3;border-radius:8px;overflow:hidden;width:100%}
.program-intro picture{display:block;width:100%;height:100%}
.program-intro img{width:100%;height:100%;object-fit:cover;object-position:center 25%}

.benefits{background:var(--cream)}
.benefits-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:680px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}
.benefit{background:#fff;padding:28px;border-radius:10px}
.benefit .icon{width:42px;height:42px;border-radius:10px;background:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--ink)}
.benefit .icon svg{width:22px;height:22px}
.benefit h3{font:700 17px/1.25 'Fraunces',serif;color:var(--teal);margin:0 0 8px}
.benefit p{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.55}

.offer{background:var(--paper)}
.offer-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:680px){.offer-grid{grid-template-columns:repeat(2,1fr)}}
.offer-card{padding:32px;border-left:none;border:1px solid var(--line);border-radius:8px}
.offer-card h3{font:700 19px/1.25 'Fraunces',serif;color:var(--teal);margin:0 0 10px}
.offer-card p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.6}

/* ===== Compliance disclosure block ===== */
.disclosure{background:var(--sky);border-radius:8px;padding:20px 24px;font-size:14px;color:var(--ink-soft);line-height:1.6;margin:32px auto 0;max-width:880px}
.disclosure strong{color:var(--teal);display:block;margin-bottom:6px;font-family:'Fraunces',serif;font-size:15px}

/* ===== Donate page ===== */
.donate-intro{background:var(--paper)}
.donate-tabs{background:var(--paper);padding-top:0}
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--line);margin-bottom:40px;justify-content:center}
.tab-btn{background:none;border:none;font:600 14px 'Inter',sans-serif;color:var(--ink-soft);padding:14px 20px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;text-transform:uppercase;letter-spacing:0.06em}
.tab-btn:hover{color:var(--teal)}
.tab-btn.active{color:var(--teal);border-bottom-color:var(--gold)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fade-in .4s ease}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.give-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:680px){.give-grid{grid-template-columns:repeat(2,1fr)}}
.give-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.give-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.08);border-color:var(--gold)}
.give-card picture{display:block;width:100%;height:220px;overflow:hidden}
.give-card img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
/* Portrait photos in landscape give-card frames need to anchor to the top so faces stay visible after object-fit:cover crops the bottom. */
.give-card img[src*="matt-shelley"],
.give-card img[src*="erasmus-pastor"],
.give-card img[src*="matt-actis-portrait"]{object-position:center top}
.give-card .body{padding:28px;display:flex;flex-direction:column;flex:1}
.give-card .eyebrow{margin-bottom:10px}
/* Give-card headings are <h2> (not <h3>) so the donate page goes h1 → h2
   sequentially. Visual styling stays small-card-heading-sized. */
.give-card h2{font:700 20px/1.2 'Fraunces',serif;color:var(--teal);margin:0 0 10px}
.give-card p{font-size:14px;color:var(--ink-soft);margin:0 0 20px;flex:1;line-height:1.55}
.give-card .btn{align-self:flex-start}
.give-card-textonly{background:linear-gradient(135deg,var(--sky),var(--paper));border:1px solid var(--line)}
.give-card-textonly .body{padding:36px 28px}

/* ===== Utility classes (extracted from inline styles) ===== */
.u-verse{font:500 italic 18px/1.5 'Fraunces',serif;color:var(--burnt);border-left:3px solid var(--gold);padding-left:16px;margin-top:20px}
.u-form-heading{font:700 28px 'Fraunces',serif;color:var(--teal);margin:0 0 24px}
.u-form-notice{font-size:13px;color:var(--ink-soft);margin:0 0 18px;background:var(--sky);padding:12px 14px;border-radius:6px}
.u-form-foot{font-size:13px;color:var(--ink-soft);margin-top:16px}
.u-checkbox-label{font:400 14px 'Inter',sans-serif;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.u-card-fineprint{font-size:13px;color:var(--ink-soft);font-style:italic}
.u-mesa-note{font-size:14px;color:var(--ink-soft);margin-top:24px}
.u-campus-h2{font:700 clamp(28px,3.5vw,38px)/1.15 'Fraunces',serif;color:var(--teal);margin:0 0 18px}
.u-campus-p{font-size:16px;color:var(--ink-soft);line-height:1.7;margin:0 0 12px}
.u-campus-p-last{font-size:16px;color:var(--ink-soft);line-height:1.7;margin:0}
.u-tips-list{margin:18px 0 0;padding-left:22px;color:var(--ink-soft);font-size:16px;line-height:1.7}
.u-section-tight{padding:64px 0}
.u-section-head-flush{margin-bottom:0}
.u-news-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:48px;text-align:center}
.u-disclosure-margin{margin-top:48px}
.u-program-intro-sky{background:var(--sky)}
/* Inline body-text links: keep them inline AND underline them so they meet
   axe-core's link-in-text-block rule. The burnt link color against ink-soft
   body text is only ~1.57:1, so color alone is not a sufficient affordance —
   the underline is what carries the cue. */
.site-footer .legal a,.site-footer p a,.scripture-attribution a,.disclosure a,.u-form-foot a,.u-form-notice a,.u-mesa-note a,.u-card-fineprint a,.u-checkbox-label a{display:inline;text-decoration:underline}
.site-footer .newsletter small a{display:inline;color:var(--gold);text-decoration:underline}

.mail{background:var(--cream);padding:64px 0;text-align:center}
.mail h2{font:700 28px/1.2 'Fraunces',serif;color:var(--teal);margin:0 0 12px}
.mail p{font-size:16px;color:var(--ink-soft);margin:0 0 8px;line-height:1.6}
.mail .address{font:600 18px 'Fraunces',serif;color:var(--teal);margin-top:16px}

.campus{background:var(--paper)}
.campus .grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:880px){.campus .grid{grid-template-columns:1fr 1fr;gap:64px}}
.campus .grid>div:has(picture){aspect-ratio:4/3;border-radius:8px;overflow:hidden;width:100%}
.campus picture{display:block;width:100%;height:100%}
.campus img{width:100%;height:100%;object-fit:cover}

/* ===== Contact page ===== */
.contact{background:var(--paper)}
.contact .grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:880px){.contact .grid{grid-template-columns:1fr 1.4fr;gap:80px}}
/* Contact-column section headings are <h2> (not <h3>) so the document goes
   h1 → h2 sequentially. The visual styling stays small-card-heading-sized. */
.contact-info h2{font:700 18px 'Fraunces',serif;color:var(--teal);margin:0 0 8px}
.contact-info p{font-size:15px;color:var(--ink-soft);margin:0 0 20px;line-height:1.6}
.contact-info a{color:var(--burnt)}
.contact-form .group{margin-bottom:18px}
.contact-form label{display:block;font:600 13px 'Inter',sans-serif;color:var(--ink);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.06em}
.contact-form input,.contact-form textarea{width:100%;padding:14px;border:1px solid var(--line);border-radius:4px;font:15px 'Inter',sans-serif;color:var(--ink);background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,87,100,0.1)}
.contact-form textarea{min-height:160px;resize:vertical;font-family:'Inter',sans-serif}
.contact-form .checkbox{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft);line-height:1.5}
.contact-form .checkbox input{width:auto;margin-top:3px}
.contact-form .honeypot{position:absolute;left:-9999px;top:-9999px;visibility:hidden}

/* ===== Newsletter page ===== */
.news-signup{background:var(--paper);padding:80px 0}
.news-signup .card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:48px;text-align:center}
.news-signup h2{font:700 28px 'Fraunces',serif;color:var(--teal);margin:0 0 12px}
.news-signup p{color:var(--ink-soft);margin:0 0 28px}
.news-signup form{display:flex;flex-direction:column;gap:12px}
.news-signup input{padding:14px;border:1px solid var(--line);border-radius:4px;font:15px 'Inter',sans-serif}
.news-signup button{padding:14px;background:var(--gold);color:var(--ink);border:none;border-radius:4px;font:700 14px 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer}
.news-signup button:hover{background:var(--gold-hover)}
.news-signup small{display:block;color:var(--ink-soft);font-size:13px;margin-top:16px;line-height:1.5}
.news-signup small a{text-decoration:underline}

/* ===== Privacy / long-form content ===== */
.longform{background:var(--paper);max-width:820px;margin:0 auto;padding:64px var(--gut)}
.longform p,.longform li{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.longform h2{font:700 24px/1.3 'Fraunces',serif;color:var(--teal);margin:48px 0 14px;letter-spacing:-0.01em}
.longform h3{font:700 18px/1.3 'Fraunces',serif;color:var(--teal);margin:32px 0 8px}
.longform ul{padding-left:22px;margin:0 0 18px}
.longform li{margin-bottom:6px}
.longform a{color:var(--burnt);text-decoration:underline}
.longform a:hover{color:var(--orange)}
.longform strong{color:var(--ink)}

/* content-visibility — defer rendering until near viewport
   .intro and .program-intro removed: they sit immediately under the hero and would flash empty space at first paint */
.programs,.impact,.story,.trust,.cta-band,.bio,.values,.benefits,.offer,.campus,.mail,.news-signup{content-visibility:auto;contain-intrinsic-size:1px 800px}
/* scroll-margin so anchor jumps clear the sticky header */
section[id]{scroll-margin-top:80px}
@media(max-width:879px){section[id]{scroll-margin-top:64px}}
@media(max-width:680px){.site-footer .legal{flex-direction:column;align-items:flex-start;gap:8px}}
@media(max-width:480px){.give-card picture{height:200px}}