/* ==========================================================================
   Village Gospel Mission
   Brand colours sampled from the logo: navy #0A127F, gold #F5B440
   ========================================================================== */

:root{
  --navy-900:#0a1030;
  --navy-800:#0e1746;
  --navy-700:#141f63;
  --navy-600:#1b2b86;
  --gold:#f5b440;
  --gold-600:#d8951f;
  --gold-soft:#fbe6bd;

  --sand:#faf6ef;
  --paper:#ffffff;
  --line:#e6e0d5;

  --ink:#20232e;
  --muted:#5b6070;
  --on-dark:#eef0f6;
  --on-dark-muted:#b6bbcd;

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:1200px;
  --gut:clamp(20px, 5vw, 48px);
  --radius:4px;
  --shadow:0 18px 40px -24px rgba(10,16,48,.45);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  color:var(--navy-800);
}
h1{font-size:clamp(2.1rem, 6vw, 3.9rem); line-height:1.06; letter-spacing:-.022em}
h2{font-size:clamp(1.65rem, 3.6vw, 2.5rem)}
h3{font-size:clamp(1.15rem, 2vw, 1.35rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--navy-600); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--gold-600)}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
section[id]{scroll-margin-top:76px}
.center{text-align:center}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-800); color:#fff; padding:12px 18px;
}
.skip:focus{left:8px; top:8px}

.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); margin:0 0 .85em;
}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-size:.94rem; font-weight:600; letter-spacing:.01em;
  line-height:1.15; /* don't inherit the 1.68 body leading, it inflates every button */
  padding:.82em 1.5em; border-radius:var(--radius); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:1em 1.9em; font-size:1rem}
.btn-block{display:flex; width:100%}

.btn-gold{background:var(--gold); color:#2a1d02; border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-600); border-color:var(--gold-600); color:#2a1d02}

.btn-outline{background:transparent; color:var(--navy-700); border-color:#cdd2e2}
.btn-outline:hover{background:var(--navy-700); border-color:var(--navy-700); color:#fff}

.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px)}
.btn-ghost:hover{background:#fff; color:var(--navy-800); border-color:#fff}

/* --------------------------------------------------------------- header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:14px 0;
  transition:background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header::before{
  content:""; position:absolute; inset:0 0 -80px 0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 40%,
    rgba(255,255,255,.80) 60%,
    rgba(255,255,255,.44) 76%,
    rgba(255,255,255,.16) 89%,
    rgba(255,255,255,0) 100%);
  transition:opacity .3s ease;
}
.site-header.stuck{background:var(--paper); padding:8px 0; box-shadow:0 1px 0 var(--line), 0 6px 24px rgba(10,16,48,.1)}
.site-header.stuck::before{opacity:0}

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative}

.brand{display:block; line-height:0; flex:0 0 auto}
.brand img{
  height:clamp(70px, 5.4vw, 72px); width:auto;
  transition:height .3s ease;
}
.site-header.stuck .brand img{height:clamp(56px, 4.4vw, 56px)}

.nav{display:flex; align-items:center; gap:clamp(14px, 2vw, 30px)}
.nav a{
  color:var(--navy-800); text-decoration:none; font-size:.9rem; font-weight:500; letter-spacing:.01em;
  padding:6px 0; position:relative;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a:hover{color:var(--navy-600)}
/* Needs to out-specify `.nav a`, which sets padding:6px 0 and would flatten the sides.
   Kept close to the nav link size so it reads as part of the row, not a banner. */
.nav a.nav-give{color:#2a1d02; font-size:.86rem; padding:.58em 1.3em; font-weight:600}
.nav a.nav-give:hover{color:#2a1d02}

.menu-btn{
  display:none; width:44px; height:44px; padding:10px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.menu-btn span{
  display:block; height:2px; background:var(--navy-800); border-radius:2px; margin:4px 0;
  transition:transform .25s ease, opacity .2s ease, background-color .2s ease;
}
.menu-btn[aria-expanded="true"] span{background:var(--navy-800)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  /* Tighter bar so the larger lockup doesn't cost extra header height. */
  .site-header{padding:9px 0}
  .site-header.stuck{padding:6px 0}
  .menu-btn{display:block}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px, 84vw);
    flex-direction:column; align-items:stretch; justify-content:center; gap:4px;
    background:var(--paper); padding:96px 32px 40px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
    box-shadow:-20px 0 50px rgba(10,16,48,.18);
  }
  .nav.open{transform:none; visibility:visible; transition-delay:0s}
  .nav a{font-family:var(--serif); font-size:1.32rem; padding:14px 0; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a.nav-give{
    margin-top:22px; justify-content:center; border-bottom:0;
    font-family:var(--sans); font-size:1rem; padding:.9em 1.6em;
  }
  body.nav-open{overflow:hidden}
}

/* --------------------------------------------------------------- hero */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:min(92svh, 860px); padding:140px 0 clamp(64px, 12vh, 120px);
  overflow:hidden; background:var(--navy-900);
}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.08); transform-origin:center 40%; will-change:transform;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,16,48,.92) 0%, rgba(10,16,48,.6) 34%, rgba(10,16,48,.18) 62%, rgba(10,16,48,.06) 100%),
    linear-gradient(to right, rgba(10,16,48,.42), rgba(10,16,48,0) 72%);
}
/* No max-width here: this element also carries .wrap, and narrowing it would pull the
   hero's left edge off the container edge that every section below it sits on.
   Constrain the text instead. */
.hero-inner{position:relative}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:#fff; margin-bottom:.38em; text-wrap:balance; max-width:11em}
.lede{
  font-size:clamp(1.05rem, 1.9vw, 1.3rem); line-height:1.6;
  color:var(--on-dark); max-width:56ch; margin-bottom:2em;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}


/* --------------------------------------------------------------- sections */
.section{padding:clamp(64px, 9vw, 116px) 0}
.section-alt{background:var(--paper); border-block:1px solid var(--line)}
.section-dark{background:var(--navy-900); color:var(--on-dark)}
.section-dark h2{color:#fff}
.section-dark p{color:var(--on-dark-muted)}
.section-dark .eyebrow{color:var(--gold)}

.section-head{max-width:64ch; margin-bottom:clamp(34px, 5vw, 58px)}
.section-sub{color:var(--muted); font-size:1.05rem}

.grid-2{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px, 5vw, 72px); align-items:center}
@media (max-width:860px){
  .grid-2{grid-template-columns:1fr; gap:36px}
  .grid-2-rev .figure{order:2}
}

.figure{margin:0}
/* Lets the first photo break up into the hero so the fold has some depth. */
.figure.figure-lift{
  align-self:start; margin-top:clamp(-180px, -13vw, -70px);
  position:relative; z-index:6;
}
@media (max-width:860px){ .figure.figure-lift{margin-top:0; align-self:auto} }
.figure img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
/* Gold block set behind the photo, offset, so the column has some depth. */
.figure-offset{position:relative; isolation:isolate}
/* Sized against the square photo, not the caption, so it reads as an offset frame. */
.figure-offset::before{
  content:""; position:absolute; z-index:-1;
  top:-18px; left:18px; right:-18px; aspect-ratio:1/1;
  background:var(--gold-soft); border-radius:var(--radius);
}
.grid-2-rev .figure-offset::before{left:-18px; right:18px}
@media (max-width:860px){
  .figure-offset::before,.grid-2-rev .figure-offset::before{top:-12px; left:12px; right:-12px}
  .grid-2-rev .figure-offset::before{left:-12px; right:12px}
}
.figure figcaption{
  margin-top:14px; font-size:.86rem; color:var(--muted);
  border-left:2px solid var(--gold); padding-left:12px; line-height:1.5;
}
.section-dark .figure figcaption{color:var(--on-dark-muted)}

/* --------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(18px, 2.4vw, 30px)}
@media (max-width:1040px){ .cards{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d8d0c1}
.card img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.card:hover img{transform:scale(1.05)}
.card-body{padding:22px 22px 26px}
.card-body h3{margin-bottom:.45em}
.card-body h3::after{
  content:""; display:block; width:26px; height:2px; background:var(--gold); margin-top:.6em;
}
.card-body p{font-size:.95rem; color:var(--muted); margin:0}

/* --------------------------------------------------------------- quote band */
.band{
  position:relative; padding:clamp(80px, 13vw, 160px) 0;
  background-image:url("../img/band.jpg");
  background-size:cover; background-position:center 55%; background-attachment:fixed;
}
.band::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(10,16,48,.78), rgba(10,16,48,.62) 45%, rgba(10,16,48,.78));
}
.band-inner{position:relative; max-width:900px; text-align:center}
.band blockquote{margin:0}
.band blockquote p{
  font-family:var(--serif); font-size:clamp(1.3rem, 3vw, 2.05rem); line-height:1.4;
  color:#fff; text-wrap:balance; margin-bottom:1em;
}
.band cite{font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
@media (max-width:900px){ .band{background-attachment:scroll} }

/* --------------------------------------------------------------- gallery */
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(10px, 1.6vw, 20px)}
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2, 1fr)} }

.shot{
  padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden;
  border-radius:var(--radius); line-height:0; position:relative;
}
.shot img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.shot::after{
  content:""; position:absolute; inset:0; background:rgba(10,16,48,0); transition:background .3s ease;
}
.shot:hover img{transform:scale(1.045)}
.shot:hover::after{background:rgba(10,16,48,.12)}

.gallery + .center{margin-top:clamp(28px, 4vw, 44px)}

/* --------------------------------------------------------------- give */
.give-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.4vw, 28px); align-items:stretch}
@media (max-width:900px){ .give-grid{grid-template-columns:1fr} }

.give-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 28px; display:flex; flex-direction:column;
}
.give-card h3{margin-bottom:.5em}
.give-card > p{font-size:.95rem; color:var(--muted)}
.give-cta{margin-top:auto; padding-top:6px}
.give-card-primary{
  border-color:var(--gold); background:#fffdf8;
  box-shadow:0 0 0 3px rgba(245,180,64,.16);
}
.give-tag{
  display:inline-block; align-self:flex-start; margin:0 0 14px;
  background:var(--gold); color:#2a1d02; font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:.35em .8em; border-radius:2px;
}
.give-note{margin:12px 0 0; font-size:.8rem; color:var(--muted); text-align:center; word-break:break-all}

.copy-row{
  display:flex; align-items:center; gap:8px; margin:0 0 18px;
  background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); padding:8px 8px 8px 14px;
}
.copy-row code{
  font-family:var(--sans); font-size:.9rem; color:var(--ink);
  flex:1; min-width:0; overflow-wrap:anywhere;
}
.copy-btn{
  flex:0 0 auto; border:1px solid #cdd2e2; background:#fff; color:var(--navy-700);
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.04em;
  padding:.5em .9em; border-radius:2px; cursor:pointer; transition:all .18s ease;
}
.copy-btn:hover{background:var(--navy-700); color:#fff; border-color:var(--navy-700)}
.copy-btn.done{background:#1f7a4d; border-color:#1f7a4d; color:#fff}

.give-foot{margin-top:clamp(28px, 4vw, 40px); text-align:center; color:var(--muted); font-size:.95rem}

/* --------------------------------------------------------------- contact */
.contact-list{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.14)}
.contact-list li{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.contact-list span{
  flex:0 0 96px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.contact-list a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); overflow-wrap:anywhere}
.contact-list a:hover{color:var(--gold); border-color:var(--gold)}

/* --------------------------------------------------------------- footer */
.site-footer{
  background:var(--paper); color:var(--muted);
  padding:56px 0 44px; border-top:3px solid var(--gold);
}
.footer-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px}
.footer-logo{height:clamp(56px, 7vw, 74px); width:auto}
.footer-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px}
.footer-nav a{color:var(--navy-800); text-decoration:none; font-size:.9rem}
.footer-nav a:hover{color:var(--gold-600)}
.footer-meta{font-size:.82rem; margin:0; color:var(--muted)}

/* --------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(8,12,34,.94); padding:clamp(16px, 5vw, 56px);
  opacity:0; transition:opacity .22s ease;
}
.lightbox.show{opacity:1}
/* The class sets display:grid, which would otherwise beat the UA rule for [hidden]
   and leave an invisible full-screen overlay eating every click on the page.
   The pointer-events rule is a second line of defence for the fade-out window. */
.lightbox[hidden]{display:none}
.lightbox:not(.show){pointer-events:none}
.lb-figure{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px}
.lb-figure img{max-width:100%; max-height:76svh; width:auto; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-figure figcaption{color:#c9cee0; font-size:.9rem; text-align:center; max-width:60ch}

.lb-close,.lb-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:#fff; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; transition:background .2s ease;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close{top:16px; right:16px; width:44px; height:44px; font-size:1.7rem; line-height:1}
.lb-nav{top:50%; translate:0 -50%; width:50px; height:50px; font-size:2rem; line-height:1; padding-bottom:5px}
.lb-prev{left:12px}
.lb-next{right:12px}
@media (max-width:640px){
  .lb-nav{width:42px; height:42px; font-size:1.6rem}
  .lb-figure img{max-height:66svh}
}

/* --------------------------------------------------------------- reveal */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s ease var(--d, 0ms), transform .75s cubic-bezier(.2,.6,.3,1) var(--d, 0ms);
}
.reveal.in{opacity:1; transform:none}
.gallery.reveal{opacity:1; transform:none; transition:none}
.gallery .shot{opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity .7s ease var(--d,0ms), transform .7s cubic-bezier(.2,.6,.3,1) var(--d,0ms)}
.gallery.in .shot{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.gallery .shot{opacity:1; transform:none; transition:none}
  .card:hover{transform:none}
  .card:hover img,.shot:hover img{transform:none}
  .hero-media img{transform:none !important}
}

/* print */
@media print{
  .site-header,.lightbox,.menu-btn{display:none !important}
  body{background:#fff}
}