/* ══════════════════════════════════════════════════
   SANCTUARY — church & non-profit template
   A Designs by Delia design

   Third distinct language:
   Saffron  = dark  · sharp · serif display · centered
   Haven    = light · sharp · roman caps    · split
   Sanctuary= warm  · ROUNDED · soft serif  · offset/arched
   ══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --paper:#FFFCF6;
  --oat:#F6EEE0;
  --sand:#EADBC4;
  --clay:#C4693F;
  --clay-dk:#A0522F;
  --leaf:#5E7A56;
  --cocoa:#33291F;
  --mocha:#7A6A58;
  --line:rgba(51,41,31,.12);
  --r-lg:34px;
  --r-md:22px;
  --r-sm:14px;
  --r-pill:999px;
  --disp:'Fraunces',serif;
  --sans:'Figtree',sans-serif;
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);background:var(--paper);color:var(--cocoa);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{display:block;width:100%;height:100%;object-fit:cover;}
::selection{background:var(--clay);color:var(--paper);}

.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,46px);}

/* ── type ── */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--clay);
}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.08;letter-spacing:-.015em;}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--clay);}

/* pill buttons — nothing else in the set is round */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:15px 30px;border-radius:var(--r-pill);border:2px solid transparent;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1),background .3s,color .3s,box-shadow .3s;
}
.btn:hover{transform:translateY(-3px);}
.btn-clay{background:var(--clay);color:var(--paper);box-shadow:0 8px 20px rgba(196,105,63,.26);}
.btn-clay:hover{background:var(--clay-dk);box-shadow:0 14px 28px rgba(196,105,63,.34);}
.btn-out{border-color:var(--cocoa);color:var(--cocoa);}
.btn-out:hover{background:var(--cocoa);color:var(--paper);}
.btn-paper{background:var(--paper);color:var(--cocoa);}
.btn-paper:hover{background:var(--oat);}

/* ── reveal: soft spring pop (JS-gated so nothing can strand) ── */
.js .rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s ease,transform .8s cubic-bezier(.34,1.3,.5,1);}
.js .rv.in{opacity:1;transform:none;}
.js .rv.d1{transition-delay:.1s;} .js .rv.d2{transition-delay:.2s;}
.js .rv.d3{transition-delay:.3s;} .js .rv.d4{transition-delay:.4s;}

/* ══ NAV ══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px clamp(20px,4vw,46px);transition:background .4s,box-shadow .4s,padding .4s;
}
.nav.stuck{background:rgba(255,252,246,.95);backdrop-filter:blur(12px);box-shadow:0 2px 18px rgba(51,41,31,.07);padding:12px clamp(20px,4vw,46px);}
.nav-logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600;font-size:23px;}
.nav-logo .mark{
  width:32px;height:32px;border-radius:50% 50% 50% 8px;
  background:var(--clay);flex:0 0 auto;
}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--cocoa);opacity:.8;transition:opacity .25s,color .25s;}
.nav-links a:hover{opacity:1;color:var(--clay);}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--cocoa);margin:5px 0;}

/* ══ HERO — offset, arched, not centered or split ══ */
.hero{padding:clamp(112px,15vh,164px) 0 clamp(50px,7vw,88px);position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;top:-14%;right:-12%;width:min(720px,62vw);aspect-ratio:1;
  background:var(--oat);border-radius:50%;z-index:0;
}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;}
.hero-copy .eyebrow{display:block;margin-bottom:18px;}
.hero h1{font-size:clamp(42px,6vw,80px);margin-bottom:22px;}
.hero-copy > p{font-size:17px;font-weight:400;line-height:1.85;color:var(--mocha);max-width:46ch;margin-bottom:30px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;}
.hero-when{
  display:inline-flex;align-items:center;gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 10px 10px 22px;
  box-shadow:0 6px 20px rgba(51,41,31,.06);
}
.hero-when .t{font-size:14px;font-weight:600;}
.hero-when .t span{display:block;font-size:12px;font-weight:400;color:var(--mocha);}
.hero-when .go{
  width:40px;height:40px;border-radius:50%;background:var(--leaf);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;
}

/* arched hero image + floating stat */
.hero-art{position:relative;}
.hero-art .shot{
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 120px;overflow:hidden;
  aspect-ratio:4/5;box-shadow:0 26px 60px rgba(51,41,31,.14);
}
.hero-badge{
  position:absolute;left:-22px;bottom:34px;z-index:3;background:var(--paper);
  border-radius:var(--r-md);padding:16px 20px;box-shadow:0 14px 34px rgba(51,41,31,.14);
  display:flex;align-items:center;gap:13px;
}
.hero-badge .n{font-family:var(--disp);font-weight:600;font-size:30px;color:var(--clay);line-height:1;}
.hero-badge .l{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--mocha);}

/* ══ SERVICE TIMES — three rounded cards ══ */
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);}
.time-card{
  background:var(--oat);border-radius:var(--r-md);padding:clamp(24px,2.8vw,36px);
  transition:transform .4s cubic-bezier(.34,1.3,.5,1),box-shadow .4s;
}
.time-card:hover{transform:translateY(-6px) rotate(-.7deg);box-shadow:0 18px 40px rgba(51,41,31,.12);}
.time-card:nth-child(2):hover{transform:translateY(-6px) rotate(.7deg);}
.time-card .day{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:12px;}
.time-card h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:8px;}
.time-card p{font-size:14.5px;font-weight:400;line-height:1.75;color:var(--mocha);}

/* ══ SECTION ══ */
.sec{padding:clamp(62px,8vw,116px) 0;}
.sec-oat{background:var(--oat);}
.sec-cocoa{background:var(--cocoa);color:var(--paper);}
.sec-cocoa .eyebrow{color:var(--sand);}
.sec-cocoa h2 em{color:var(--sand);}
.sec-cocoa p{color:rgba(255,252,246,.72);}

.head{text-align:center;max-width:680px;margin:0 auto clamp(34px,4vw,58px);}
.head .eyebrow{display:block;margin-bottom:14px;}
.head h2{font-size:clamp(32px,4.6vw,58px);}
.head p{font-size:16px;font-weight:400;line-height:1.85;color:var(--mocha);margin-top:16px;}

/* ══ WELCOME — arch image + text ══ */
.welcome{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,72px);align-items:center;}
.arch{
  border-radius:999px 999px var(--r-md) var(--r-md);overflow:hidden;
  aspect-ratio:3/4;box-shadow:0 22px 50px rgba(51,41,31,.13);
}
.welcome-txt .eyebrow{display:block;margin-bottom:16px;}
.welcome-txt h2{font-size:clamp(30px,4vw,54px);margin-bottom:20px;}
.welcome-txt p{font-size:16px;font-weight:400;line-height:1.9;color:var(--mocha);margin-bottom:18px;}
.sig{font-family:var(--disp);font-style:italic;font-size:24px;color:var(--clay);margin-top:10px;}

/* ══ EVENTS ══ */
.events{display:grid;gap:14px;}
.event{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2.6vw,34px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);
  transition:transform .35s cubic-bezier(.34,1.3,.5,1),box-shadow .35s,border-color .35s;
}
.event:hover{transform:translateX(8px);box-shadow:0 14px 34px rgba(51,41,31,.1);border-color:var(--sand);}
.event-date{
  background:var(--clay);color:var(--paper);border-radius:var(--r-sm);
  width:72px;padding:12px 6px;text-align:center;flex:0 0 auto;
}
.event-date .m{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9;}
.event-date .d{font-family:var(--disp);font-weight:600;font-size:27px;line-height:1.1;}
.event-body h3{font-size:clamp(20px,2.1vw,25px);margin-bottom:5px;}
.event-body p{font-size:14px;font-weight:400;color:var(--mocha);line-height:1.7;}
.event-go{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .3s,color .3s,border-color .3s;
}
.event:hover .event-go{background:var(--clay);color:var(--paper);border-color:var(--clay);}

/* ══ MINISTRIES — tilt tiles ══ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);}
.tile{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:1;display:block;
  transition:transform .45s cubic-bezier(.34,1.3,.5,1);
}
.tile:hover{transform:translateY(-8px) rotate(-1.2deg);}
.tile:nth-child(even):hover{transform:translateY(-8px) rotate(1.2deg);}
.tile img{transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.tile:hover img{transform:scale(1.07);}
.tile::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(51,41,31,.78) 100%);
}
.tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:var(--paper);}
.tile-cap h3{font-size:23px;margin-bottom:4px;}
.tile-cap p{font-size:13.5px;font-weight:400;opacity:.86;}

/* ══ SERMON ══ */
.sermon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;}
.sermon-art{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:78px;height:78px;border-radius:50%;background:var(--paper);color:var(--clay);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 12px 34px rgba(51,41,31,.28);border:none;cursor:pointer;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1),background .3s,color .3s;
}
.play:hover{transform:translate(-50%,-50%) scale(1.09);background:var(--clay);color:var(--paper);}
.play::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid var(--paper);opacity:.5;animation:ring 2.6s ease-out infinite;
}
@keyframes ring{0%{transform:scale(.9);opacity:.55;}100%{transform:scale(1.35);opacity:0;}}
.sermon-txt .eyebrow{display:block;margin-bottom:14px;}
.sermon-txt h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:16px;}
.sermon-txt p{font-size:15.5px;font-weight:400;line-height:1.9;color:var(--mocha);margin-bottom:22px;}
.sermon-meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:var(--mocha);margin-bottom:26px;}
.sermon-meta b{display:block;font-family:var(--disp);font-size:18px;font-weight:600;color:var(--cocoa);}

/* ══ ACCORDION ══ */
.acc{max-width:820px;margin:0 auto;}
.acc details{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.acc details[open]{border-color:var(--sand);box-shadow:0 10px 28px rgba(51,41,31,.08);}
.acc summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--disp);font-weight:600;font-size:clamp(18px,2vw,22px);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{
  content:'+';font-family:var(--sans);font-weight:400;font-size:24px;color:var(--clay);
  flex:0 0 auto;transition:transform .3s;
}
.acc details[open] summary::after{content:'–';transform:rotate(180deg);}
.acc p{padding:0 24px 22px;font-size:15px;font-weight:400;line-height:1.9;color:var(--mocha);}

/* ══ GIVE BAND ══ */
.give{text-align:center;}
.give h2{font-size:clamp(32px,4.6vw,60px);margin-bottom:18px;}
.give p{font-size:16.5px;font-weight:400;line-height:1.85;max-width:560px;margin:0 auto 30px;}
.give-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.give-amounts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
.amount{
  background:transparent;border:1.5px solid rgba(255,252,246,.32);color:var(--paper);
  border-radius:var(--r-pill);padding:11px 24px;font-family:var(--sans);
  font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;
}
.amount:hover,.amount.on{background:var(--paper);color:var(--cocoa);border-color:var(--paper);}

/* ══ NEWSLETTER ══ */
.news{
  background:var(--oat);border-radius:var(--r-lg);
  padding:clamp(30px,4vw,58px);text-align:center;
}
.news h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:12px;}
.news p{font-size:15.5px;color:var(--mocha);margin-bottom:26px;}
.news form{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap;}
.news input{
  flex:1;min-width:220px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:15px 24px;font-family:var(--sans);font-size:15px;
  color:var(--cocoa);outline:none;transition:border-color .3s;
}
.news input:focus{border-color:var(--clay);}
.news button{cursor:pointer;border:none;}

/* ══ FOOTER ══ */
.foot{background:var(--cocoa);color:var(--paper);padding:clamp(50px,6vw,82px) 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:40px;}
.foot h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:16px;}
.foot p,.foot a{font-size:14.5px;font-weight:400;line-height:1.95;color:rgba(255,252,246,.66);display:block;transition:color .3s;}
.foot a:hover{color:var(--paper);}
.foot-logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600;font-size:26px;color:var(--paper);margin-bottom:12px;}
.foot-logo .mark{width:30px;height:30px;border-radius:50% 50% 50% 8px;background:var(--clay);flex:0 0 auto;}
.foot-bot{border-top:1px solid rgba(255,252,246,.14);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,252,246,.5);}
.foot-bot a{display:inline;color:var(--sand);}

/* ══ STICKY GIVE (appears on scroll) ══ */
.sticky-give{
  position:fixed;right:20px;bottom:78px;z-index:110;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .4s,transform .45s cubic-bezier(.34,1.4,.5,1);
}
.sticky-give.on{opacity:1;transform:none;pointer-events:auto;}

.badge{
  position:fixed;right:20px;bottom:20px;z-index:120;background:var(--cocoa);color:var(--paper);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 17px;border-radius:var(--r-pill);
  box-shadow:0 12px 30px rgba(51,41,31,.26);transition:transform .3s;
}
.badge:hover{transform:translateY(-3px);}

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  .nav-links{display:none;}
  .burger{display:block;}
  .hero-grid,.welcome,.sermon{grid-template-columns:1fr;gap:34px;}
  .hero::before{width:78vw;top:-6%;right:-24%;}
  .hero-art .shot,.arch{aspect-ratio:4/3;}
  .arch{border-radius:180px 180px var(--r-md) var(--r-md);}
  .hero-badge{left:12px;bottom:-18px;}
  .times,.tiles{grid-template-columns:1fr;}
  .event{grid-template-columns:auto 1fr;gap:16px;}
  .event-go{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .sticky-give{right:14px;bottom:70px;}
}

@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  .btn:hover,.tile:hover,.time-card:hover,.event:hover{transform:none;}
  .play::before{animation:none;}
}