/* ==========================================================================
   AWAKE AZ
   Type: Helvetica Neue (UI / body) + Lora (display serif)

   Every size, gap, and color below is measured from the 1920px design
   ("revised site.pdf"). Sizes are written as clamp(min, fluid, design-value)
   so they land exactly on the design at 1920 and scale down on smaller screens.
   ========================================================================== */

:root{
  --ink:        #2a2522;
  --ink-deep:   #111111;
  --cream:      #faf8f4;
  --white:      #ffffff;
  --orange:     #e18b1a;
  --orange-dk:  #c9770f;
  --gray:       #919191;
  --gray-dk:    #606060;

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;

  /* fluid type — upper bound = the design's value at 1920 */
  --fs-nav:        clamp(13px,  11.67px + 0.28vw, 17px);
  --fs-ui:         clamp(13px,  12.00px + 0.21vw, 16px);
  --fs-label:      clamp(11.5px,10.67px + 0.17vw, 14px);
  --fs-eyebrow:    clamp(11px,   7.67px + 0.69vw, 21px);
  --fs-eyebrow-lg: clamp(12px,   8.33px + 0.76vw, 23px);
  --fs-body:       clamp(15px,  12.33px + 0.56vw, 23px);
  --fs-body-sm:    clamp(14px,  12.00px + 0.42vw, 20px);
  --fs-quote:      clamp(27px,  22.00px + 1.04vw, 42px);
  --fs-h2:         clamp(28px,  22.67px + 1.11vw, 44px);
  --fs-display:    clamp(38px,  26.00px + 2.50vw, 74px);
  --fs-h3:         clamp(23px,  17.33px + 1.18vw, 40px);
  --fs-num:        clamp(26px,  20.00px + 1.25vw, 44px);
  --fs-tagline:    clamp(20px,  11.67px + 1.74vw, 45px);
  --fs-card-t:     clamp(20px,  17.67px + 0.49vw, 27px);
  --fs-card-b:     clamp(15px,  13.33px + 0.35vw, 20px);
  --fs-footer:     clamp(13px,  11.67px + 0.28vw, 17px);
  --fs-footer-tag: clamp(12px,  10.67px + 0.28vw, 16px);

  --track: .183em;               /* measured: eyebrows, dates, scripture, footer tagline */

  --gutter: clamp(20px, 5vw, 100px);
  --section-y: clamp(64px, 8.07vw, 155px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
h1,h2,h3,p,blockquote,figure,fieldset,legend{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
.nowrap{ white-space:nowrap; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1520px; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:calc(1040px + var(--gutter) * 2); }
.center{ text-align:center; }

.section{ padding-block:var(--section-y); }
section[id], .panel[id]{ scroll-margin-top:86px; }
@media (max-width: 900px){ section[id], .panel[id]{ scroll-margin-top:70px; } }

.section--cream{ background:var(--cream); }
.section--white{ background:var(--white); }
.section--ink{ background:var(--ink); color:#fff; }

/* ---------- type primitives ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:400;
  letter-spacing:var(--track);
  text-transform:uppercase;
  line-height:1.4;
}
.eyebrow--medium{ font-weight:500; }
.eyebrow--orange{ color:var(--orange); }

.h2{ font-family:var(--serif); font-weight:600; letter-spacing:-.005em; }
.h2--serif{
  font-size:var(--fs-h2);
  line-height:1.47;
  margin-top:clamp(16px,1.6vw,30px);
}
.h2--tight{ line-height:1.3; }

.lede{
  color:var(--gray);
  font-size:var(--fs-body);
  line-height:1.48;
  max-width:41em;
  margin-inline:auto;
  margin-top:clamp(18px,1.9vw,34px);
}
.lede--onink{ color:var(--cream); max-width:45em; }

.statement{
  font-weight:700;
  font-size:var(--fs-body);
  line-height:1.48;
  letter-spacing:-.005em;
  color:#000;
}

.rule{
  width:clamp(90px,13.02vw,250px); height:0; border:0;
  border-top:3px solid var(--orange);
  margin:clamp(30px,3vw,56px) auto clamp(24px,2.4vw,44px);
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:0; border-radius:0;
  height:clamp(44px, 2.81vw, 54px);
  padding:0 clamp(24px, 2.4vw, 46px);
  font-size:var(--fs-ui); font-weight:400;
  letter-spacing:0; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn--ink:hover{ background:#3d3630; }
.btn--white{ --btn-bg:#fff; --btn-fg:var(--ink); }
.btn--white:hover{ background:#fdf6ec; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--gray); padding-inline:0; }
.btn--ghost:hover{ --btn-fg:var(--ink); }
.btn--block{ width:100%; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:progress; }

.btn--pill{
  border-radius:999px; background:var(--orange);
  height:clamp(36px, 2.34vw, 45px);
  padding:0 clamp(26px, 2.76vw, 53px);
}
.btn--pill:hover{ background:var(--orange-dk); }

/* "Join the Move": 263 × 54, label at 71px, chevron 21px from the right edge */
.btn--arrow{
  justify-content:space-between;
  width:clamp(220px, 13.7vw, 263px);
  padding:0 clamp(16px, 1.09vw, 21px) 0 clamp(40px, 3.7vw, 71px);
}
.btn--arrow svg{
  width:clamp(6px, .38vw, 8px); height:auto; flex:none;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-top:clamp(16px, 3.28vw, 63px);
  padding-bottom:16px;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(17,17,17,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  padding-block:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.nav__inner{
  padding-left:var(--gutter);
  padding-right:clamp(20px, 5.31vw, 102px);
  display:flex; align-items:center; justify-content:flex-end; gap:28px;
}
.nav__mark{
  margin-right:auto; opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.nav__mark img{ width:clamp(104px,7vw,134px); height:auto; }
.nav.is-stuck .nav__mark{ opacity:1; pointer-events:auto; transform:none; }

/* Language switch: a pill, top left. The current language is filled in with its code;
   the other is spelled out ("Español" / "English") so the people looking for it see their word. */
.lang{
  display:flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid rgba(255,255,255,.45); border-radius:999px;
  position:relative; z-index:2; overflow:hidden;
  transition:width .45s var(--ease);
}
/* The white fill slides under the current language; script.js sets its position and width. */
.lang__thumb{
  position:absolute; top:3px; bottom:3px; left:0; width:0;
  background:#fff; border-radius:999px; pointer-events:none;
  transition:transform .45s var(--ease), width .45s var(--ease);
}
.lang__opt{
  position:relative; z-index:1;
  min-width:38px; padding:7px 11px;
  background:none; border:0; border-radius:999px; cursor:pointer;
  color:rgba(255,255,255,.88);
  font:500 12.5px/1 var(--sans); letter-spacing:.04em; white-space:nowrap;
  transition:color .35s var(--ease), background .2s var(--ease);
}
.lang__opt:hover{ color:#fff; background:rgba(255,255,255,.12); }
.lang__opt[aria-pressed="true"]{ color:var(--ink-deep); background:none; cursor:default; }
.lang__opt:focus-visible{ outline-offset:-2px; }
.lang__opt.is-swapped{ animation:lang-label .4s var(--ease); }
@keyframes lang-label{ from{ opacity:0; } to{ opacity:1; } }
.lang.is-instant, .lang.is-instant .lang__thumb{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .lang, .lang__thumb, .lang__opt{ transition:none; }
  .lang__opt.is-swapped{ animation:none; }
}

.nav__links{ display:flex; align-items:center; gap:clamp(18px, 2.45vw, 47px); }
.nav__links a{
  color:#fff; text-decoration:none;
  font-size:var(--fs-nav); font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--orange); }
.nav__links a.btn--pill{ font-size:var(--fs-ui); letter-spacing:0; margin-left:clamp(0px, 1.56vw, 30px); }

.nav__toggle{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav__toggle span{
  display:block; width:26px; height:2px; background:#fff;
  transition:transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.nav__toggle span:nth-child(2){ width:18px; }

@media (max-width: 900px){
  .nav{ padding-block:16px; }
  .nav__toggle{ display:flex; position:relative; z-index:2; }
  .nav__mark{ opacity:1; pointer-events:auto; transform:none; position:relative; z-index:2; }
  .nav__inner{ justify-content:space-between; padding-inline:var(--gutter); }
  .nav__links{
    position:fixed; inset:0 0 auto 0; z-index:1;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(17,17,17,.985);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    padding:96px var(--gutter) 34px;
    transform:translateY(-102%);
    transition:transform .45s var(--ease);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ padding:18px 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:14px; letter-spacing:.12em; }
  .nav__links a.btn{ border-bottom:0; margin:26px 0 0; align-self:flex-start; height:auto; padding:15px 38px; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; width:26px; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  background:#111 url("assets/hero.jpg") center / cover no-repeat;
  overflow:hidden; isolation:isolate;
}

/* ---- animated background: gradient field + refracted slats + grain ----
   .hero--coded  is added by script.js once the canvas is drawing
   .hero--image  (the markup default) shows assets/hero.jpg instead       */
.hero--coded{ background-image:none; }
.hero--image .hero__field,
.hero--image .hero__ribbons,
.hero--image .hero__grain,
.hero--image .hero__scrim{ display:none; }

.hero__field{
  position:absolute; inset:0; z-index:-2;
  background:
    /* cool key light, tight on the top-left corner */
    radial-gradient(34% 28% at 0% 0%,
      rgba(170,186,163,.98) 0%, rgba(120,134,118,.45) 38%,
      rgba(70,78,70,.12) 66%, rgba(60,68,60,0) 84%),
    /* warm glow, centred low-right rather than in the corner */
    radial-gradient(54% 64% at 88% 100%,
      rgba(214,130,22,1) 0%, rgba(198,119,20,.92) 26%,
      rgba(158,95,17,.5) 52%, rgba(120,70,14,0) 80%),
    /* faint warm bleed up the right edge */
    radial-gradient(26% 42% at 104% 62%,
      rgba(176,106,20,.55) 0%, rgba(140,84,16,0) 72%),
    #111111;
  animation:heroIn 1.6s var(--ease) both;
}
.hero__ribbons{
  position:absolute; inset:0; z-index:-2;
  display:block; width:100%; height:100%;
  mix-blend-mode:overlay; opacity:.95;
  animation:heroIn 1.9s var(--ease) both;
}
.hero__grain{
  position:absolute; inset:0; z-index:-2;
  pointer-events:none;
  /* tile is generated in script.js; balanced light/dark specks so it reads
     on a near-black field, where mix-blend-mode:overlay would not.        */
  background-repeat:repeat;
  background-size:128px 128px;
  opacity:.34;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 22%);
}
@keyframes heroIn{ from{ transform:scale(1.06); opacity:.3; } to{ transform:none; opacity:1; } }
.hero__content{
  padding:clamp(88px,10vh,140px) var(--gutter) clamp(88px,11.8vh,160px);
  text-align:center;
  animation:lockupIn 1.15s .2s var(--ease) both;
}
@keyframes lockupIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* Save-the-date band along the bottom of the hero: on screen the moment the page loads. */
.hero__std{
  position:absolute; inset:auto 0 0 0; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px clamp(16px, 1.82vw, 36px);
  padding:clamp(18px, 1.82vw, 34px) var(--gutter);
  background:rgba(17,17,17,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:2px solid var(--orange);
  color:#fff; text-decoration:none; text-align:center;
  animation:lockupIn 1.15s .7s var(--ease) backwards;   /* not 'both': a held end state would block the fade-out */
}
.hero__std-eyebrow{
  font-size:var(--fs-eyebrow-lg); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase;
  color:var(--orange);
}
.hero__std-title{ font-family:var(--serif); font-weight:600; font-size:var(--fs-h3); line-height:1.15; }
.hero__std-when{ font-size:var(--fs-body-sm); font-weight:500; color:#ffc981; }
.hero__std:hover .hero__std-cta{ background:var(--orange-dk); }
/* Once the page scrolls (script.js) the band slides down and tucks behind the hero's
   bottom edge (the hero clips overflow). It eases back up at the top. Visibility keeps
   it out of the tab order while it's tucked away. */
.hero__std{ transition:transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.hero__std.is-gone{
  transform:translateY(100%); visibility:hidden; pointer-events:none;
  transition:transform .45s cubic-bezier(.55,0,.75,.2), visibility 0s .45s;
}
@media (max-width: 640px){
  .hero__std{ flex-direction:column; gap:4px; padding-block:16px 18px; }
  .hero__std-cta{ margin-top:8px; }
}

.hero__title{ margin:0; line-height:0; }
.hero__lockup{ width:clamp(260px, 45.05vw, 865px); height:auto; margin-inline:auto; }
.hero__tagline{
  margin-top:clamp(14px, 2.5vw, 48px);
  font-family:var(--serif); font-weight:400;
  font-size:var(--fs-tagline); line-height:1.3;
  letter-spacing:.187em;
  color:#fff;
}

/* ==========================================================================
   PASTOR QUOTES — one slow row under the hero. script.js drifts it and lets
   people take over: drag, swipe, trackpad, or arrow keys. The list is rendered
   three times and wrapped by one copy's width, so the loop is seamless. Each card
   carries its own trailing gap (margin, not flex gap) so the copies line up.
   ========================================================================== */
.quotes{
  background:var(--white);
  padding-block:clamp(48px, 5.21vw, 100px);
}
.quotes__lead{
  margin:clamp(10px, 1vw, 18px) auto 0;
  font-size:var(--fs-h2); line-height:1.3;
  color:#000;
}
.quotes__viewport{
  margin-top:clamp(28px, 2.6vw, 50px);
  overflow:hidden;
  touch-action:pan-y;              /* sideways swipes move the quotes; up/down still scrolls the page */
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.quotes__viewport:focus-visible{ outline-offset:-2px; }
.quotes__viewport.is-dragging{ cursor:grabbing; }
.quotes__viewport.is-dragging .quotes__track{ -webkit-user-select:none; user-select:none; }
.quotes__track{ display:flex; width:max-content; will-change:transform; }

.quote{
  flex:none;
  width:min(380px, 78vw);
  margin-right:clamp(16px, 1.25vw, 24px);
  padding:clamp(20px, 1.56vw, 30px) clamp(20px, 1.56vw, 30px) clamp(18px, 1.35vw, 26px);
  background:var(--cream);
}
.quote figure{ margin:0; display:flex; flex-direction:column; height:100%; }
.quote blockquote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:var(--fs-card-b); line-height:1.5;
  color:var(--ink);
}
.quote figcaption{
  margin-top:auto; padding-top:clamp(14px, 1.04vw, 20px);
  font-size:var(--fs-label); line-height:1.45;
  color:var(--gray-dk);
}
.quote figcaption strong{ display:block; font-weight:700; color:var(--orange); }


/* ==========================================================================
   VISION  +  INVITATION
   ========================================================================== */
.pullquote{
  font-family:var(--serif);
  font-style:italic; font-weight:500;
  font-size:var(--fs-quote);
  line-height:1.54;
  letter-spacing:-.005em;
  color:#000;
  margin:clamp(18px,1.93vw,35px) auto 0;
  max-width:21em;
}
.vision{ padding-top:clamp(64px, 7.81vw, 150px); padding-bottom:clamp(64px, 11.09vw, 213px); }
.vision .pullquote + .lede{ margin-top:clamp(22px, 2.3vw, 44px); }
.vision .rule{ margin:clamp(26px, 2.4vw, 46px) auto clamp(20px, 1.82vw, 35px); }
.vision .statement + .lede{ margin-top:clamp(24px, 2.66vw, 51px); }

.invitation{ padding-top:clamp(64px, 7.55vw, 145px); padding-bottom:clamp(64px, 8.7vw, 167px); }
.invitation .h2--serif{ max-width:19.8em; margin-inline:auto; margin-top:clamp(18px, 1.98vw, 38px); color:#fff; }

/* ==========================================================================
   SIMPLE POINTS OF ALIGNMENT
   ========================================================================== */
.alignment{ padding-top:clamp(64px, 6.93vw, 133px); padding-bottom:clamp(64px, 9.43vw, 181px); }
.alignment__wrap{ padding-inline:var(--gutter); margin-top:clamp(34px, 3.33vw, 64px); }

.align-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:4px; padding:4px;
  max-width:1524px; margin-inline:auto;
  background:#f2efea;
}
.align{
  background:var(--white);
  min-height:clamp(190px, 13.7vw, 263px);
  padding:clamp(24px, 2.5vw, 48px) clamp(20px, 2.4vw, 46px) clamp(24px, 2.08vw, 40px);
}
.align:nth-child(n+3){ min-height:clamp(190px, 13.91vw, 267px); padding-top:clamp(24px, 2.6vw, 50px); }
.align:nth-child(2n){ padding-left:clamp(20px, 2.71vw, 52px); }
.align__icon{ width:clamp(32px, 2.08vw, 40px); height:auto; }
.align__title{
  margin-top:clamp(12px, 1.04vw, 20px);
  font-family:var(--serif); font-weight:700;
  font-size:var(--fs-card-t); line-height:1.25;
  color:var(--ink);
}
.align__body{
  margin-top:clamp(8px, .78vw, 15px);
  max-width:34em;
  font-size:var(--fs-card-b); font-weight:500;
  line-height:1.3;
  color:var(--gray);
}
.align:nth-child(n+3) .align__body{ line-height:1.4; }

@media (max-width: 760px){
  .align-grid{ grid-template-columns:1fr; }
  .align:nth-child(2n){ padding-left:clamp(20px, 2.4vw, 46px); }
  .align, .align:nth-child(n+3){ min-height:0; }
}

/* ==========================================================================
   THE FOUR WEEKENDS — weekend 1 carries the section header; 2–4 are shorter
   panels with their content centered
   ========================================================================== */
.wk{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:56.15vw;           /* 1078 at 1920 */
  display:flex;
  background:#1b140f;
  color:#fff;

  /* defaults = weekends 1 and 3 (dark treatment) */
  --wk-eyebrow:   var(--orange);
  --wk-muted:     #847972;
  --wk-date:      var(--orange);
  --wk-text:      #847972;
  --wk-rule:      #847972;
  --wk-scripture: var(--orange);
  --wk-small:     var(--fs-eyebrow);
  --wk-top:       clamp(56px, 7.92vw, 152px);
  --wk-bottom:    clamp(56px, 9.38vw, 180px);
  --wk-head-gap:  clamp(4px, .36vw, 7px);
  --wk-title-gap: clamp(14px, 1.35vw, 26px);
  --wk-body-gap:  clamp(22px, 2.71vw, 52px);
  --wk-rule-gap:  clamp(22px, 2.45vw, 47px);
}
.wk--2{
  --wk-eyebrow:   #ffc981;
  --wk-muted:     #ffc981;
  --wk-date:      #ffc981;
  --wk-text:      #ffc981;
  --wk-rule:      var(--cream);
  --wk-scripture: var(--cream);
  --wk-small:     var(--fs-eyebrow-lg);
  --wk-top:       clamp(56px, 7.81vw, 150px);
  --wk-bottom:    clamp(56px, 9.32vw, 179px);
  --wk-head-gap:  clamp(4px, .31vw, 6px);
  --wk-body-gap:  clamp(22px, 2.66vw, 51px);
  --wk-rule-gap:  clamp(22px, 2.4vw, 46px);
}
.wk--3{
  --wk-text:      var(--gray);
  --wk-rule:      #898989;
  --wk-small:     var(--fs-eyebrow-lg);
  --wk-top:       clamp(56px, 7.6vw, 146px);
  --wk-bottom:    clamp(56px, 9.58vw, 184px);
  --wk-head-gap:  clamp(4px, .31vw, 6px);
  --wk-body-gap:  clamp(18px, 1.88vw, 36px);
  --wk-rule-gap:  clamp(14px, 1.35vw, 26px);
}
.wk--4{
  --wk-eyebrow:   #ffc981;
  --wk-muted:     #ffc981;
  --wk-date:      #ffc981;
  --wk-text:      #ffc981;
  --wk-rule:      #fff;
  --wk-scripture: #fff;
  --wk-small:     var(--fs-eyebrow-lg);
  --wk-top:       clamp(56px, 7.92vw, 152px);
  --wk-bottom:    clamp(56px, 9.27vw, 178px);
  --wk-head-gap:  clamp(4px, .31vw, 6px);
  --wk-title-gap: clamp(20px, 2.9vw, 56px);
  --wk-body-gap:  clamp(18px, 1.88vw, 36px);
  --wk-rule-gap:  clamp(14px, 1.35vw, 26px);
}

.wk__bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.wk__inner{
  flex:1;
  display:flex; flex-direction:column;
  padding:var(--wk-top) var(--gutter) var(--wk-bottom) clamp(20px, 11.04vw, 212px);
}
.wk__eyebrow{
  font-size:var(--wk-small); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase; line-height:1.3;
  color:var(--wk-eyebrow);
}
.wk__heading{
  margin-top:var(--wk-head-gap);
  font-family:var(--serif); font-weight:700;
  font-size:var(--fs-h3); line-height:1.2;
  color:#fff;
}
.wk__body{ margin-top:auto; padding-top:clamp(48px, 6vw, 120px); max-width:942px; }

/* weekends 2–4: 800 tall at 1920, no header, block vertically centered */
.wk--short{ min-height:41.67vw; }
.wk--short .wk__inner{ justify-content:center; padding-block:clamp(56px, 6.46vw, 124px) clamp(56px, 6.04vw, 116px); }
.wk--short .wk__body{ margin-top:0; padding-top:0; }

.wk__meta{ display:flex; align-items:baseline; }
.wk__num{
  flex:none; width:1.955em;     /* date always starts 86px from the left edge */
  font-family:var(--serif); font-weight:700;
  font-size:var(--fs-num); line-height:1.1;
  color:var(--wk-muted);
}
.wk__date{
  font-size:var(--wk-small); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase;
  color:var(--wk-date);
}
.wk__title{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-display); line-height:.95;
  letter-spacing:-.005em;
  margin-top:clamp(14px, 1.67vw, 32px);
  color:#fff;
}
.wk__text{
  margin-top:var(--wk-title-gap);
  max-width:30.5em;
  font-size:var(--fs-body); line-height:1.48;
  color:var(--wk-text);
}
.wk__rule{
  border:0; height:2px; background:var(--wk-rule);
  margin:var(--wk-body-gap) 0 var(--wk-rule-gap);
}
.wk__scripture{
  font-size:var(--wk-small); font-weight:500;
  letter-spacing:var(--track); line-height:1.4;
  color:var(--wk-scripture);
}

/* weekend 4: Night of Worship card beside the content */
.wk__split{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(32px, 4vw, 80px);
}
.wk__split .wk__body{ flex:1 1 auto; }
.wk__card{
  flex:0 1 clamp(260px, 24vw, 420px);
  background:var(--cream); color:var(--ink);
  padding:clamp(24px, 2.4vw, 46px);
  border-radius:4px;
  box-shadow:0 24px 60px rgba(17,17,17,.35);
}
.wk__card-date{
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase;
  color:var(--orange-dk);
}
.wk__card-title{
  margin:10px 0 0;
  font-family:var(--serif); font-weight:700;
  font-size:var(--fs-h3); line-height:1.1;
}
.wk__card-rule{ border:0; height:2px; background:var(--ink); margin:clamp(16px, 1.6vw, 28px) 0; }
.wk__card-note{
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--track); line-height:1.4; text-transform:uppercase;
}
.wk__card-note a{ text-decoration:none; border-bottom:1px solid currentColor; }

/* event band between weekends 3 and 4: slim and solid, so it doesn't read as a fifth weekend */
.wk-band{
  background:var(--ink-deep); color:#fff;
  padding:clamp(40px, 4.6vw, 88px) var(--gutter) clamp(40px, 4.6vw, 88px) clamp(20px, 11.04vw, 212px);
  display:grid; grid-template-columns:minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items:center; gap:clamp(20px, 3vw, 64px);
}
.wk-band__date{
  font-size:var(--fs-eyebrow-lg); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase; line-height:1.4;
  color:var(--orange);
}
.wk-band__date time{ display:block; color:#a69c95; }
.wk-band__title{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-h3); line-height:1.1;
}
.wk-band__text{ margin-top:8px; font-size:var(--fs-body-sm); color:#a69c95; }
.wk-band__note{
  max-width:16em; text-align:right;
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--track); line-height:1.5; text-transform:uppercase;
  color:#ffc981;
}
.wk-band__note a{ text-decoration:none; border-bottom:1px solid currentColor; }

@media (max-width: 760px){
  .wk{ min-height:0; }
  .wk__inner{ padding-inline:var(--gutter); }
  .wk__body{ padding-top:72px; }
  .wk__split{ flex-direction:column; align-items:stretch; }
  .wk__card{ flex-basis:auto; }
  .wk-band{ grid-template-columns:1fr; padding-inline:var(--gutter); }
  .wk-band__note{ text-align:left; max-width:none; }
}

/* ==========================================================================
   CHURCHES
   ========================================================================== */
.churches{ padding-block:clamp(64px, 7.76vw, 149px) clamp(64px, 8.02vw, 154px); }
.churches__inner{ padding-inline:clamp(20px, 11.98vw, 230px) var(--gutter); }
.churches__title{
  margin-top:clamp(16px, 1.93vw, 37px);
  max-width:9.6em;
  font-size:var(--fs-display); line-height:1.15;
  color:#000;
}
.churches__text{
  margin-top:clamp(16px, 1.67vw, 32px);
  max-width:41em;
  font-size:var(--fs-body-sm); line-height:1.5;
  color:var(--gray-dk);
}
.churches .btn--arrow{ margin-top:clamp(24px, 2.34vw, 45px); }

/* ==========================================================================
   VISIONCAST SAVE THE DATE — dark block right above the signup panels
   ========================================================================== */
.visioncast__title{
  margin-top:clamp(16px, 1.93vw, 37px);
  font-size:var(--fs-display); line-height:1.1;
  color:#fff;
}
.visioncast__date{
  margin-top:clamp(14px, 1.35vw, 26px);
  font-size:var(--fs-card-t); font-weight:500; line-height:1.4;
  color:#ffc981;
}
.visioncast__dot{ margin-inline:.45em; }
.visioncast__place{
  margin-top:clamp(10px, .83vw, 16px);
  font-size:var(--fs-body-sm); line-height:1.5;
  color:var(--cream);
}
.visioncast__place strong{ display:block; font-weight:600; color:#fff; }
.visioncast__place a{ text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }
.visioncast__place a:hover{ color:#fff; text-decoration-color:var(--orange); }
.visioncast .lede{ max-width:38em; text-wrap:pretty; }
/* phones: date and time on their own lines instead of a dangling dot */
@media (max-width: 560px){
  .visioncast__date time{ display:block; }
  .visioncast__dot{ display:none; }
}
.visioncast__meta{
  margin-top:clamp(12px, 1vw, 18px);
  font-size:var(--fs-body-sm); line-height:1.5;
  color:var(--cream);
}
.visioncast .lede + .visioncast__meta{ margin-top:clamp(20px, 1.93vw, 37px); }
.visioncast__ctas{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px clamp(28px, 2.08vw, 40px);
  margin-top:clamp(28px, 2.6vw, 50px);
}
.visioncast .btn--ghost{ --btn-fg:#b4b4b4; }
.visioncast .btn--ghost:hover{ --btn-fg:#fff; }
.visioncast__note{
  max-width:34em; margin:clamp(22px, 2.08vw, 40px) auto 0;
  font-size:var(--fs-label); line-height:1.55;
  color:#b4b4b4;
}

/* ==========================================================================
   JOIN + INVITE PANELS
   ========================================================================== */
.join{ padding-top:clamp(64px, 6.35vw, 122px); padding-bottom:0; }
.join .h2--serif{ margin-top:clamp(18px, 1.98vw, 38px); }
.join .lede{ max-width:39em; margin-top:clamp(8px, .63vw, 12px); }

.panels{
  display:grid; grid-template-columns:642fr 648fr;
  max-width:1290px;
  margin:clamp(40px, 4.64vw, 89px) auto 0;
  box-shadow:0 0 60px rgba(0,0,0,.09);
}
.panel{
  display:flex; flex-direction:column;
  min-height:clamp(600px, 45.1vw, 866px);
  padding:clamp(28px, 3.1vw, 60px) clamp(22px, 2.24vw, 43px) clamp(28px, 2.08vw, 40px) clamp(22px, 2.45vw, 47px);
}
.panel--signup{ background:#fefefe; }
.panel--invite{
  background:var(--cream);
  padding-left:clamp(22px, 2.34vw, 45px);
  padding-right:clamp(22px, 2.66vw, 51px);
}
.panel form{ display:flex; flex-direction:column; flex:1; }

.panel__heading{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-h2); line-height:1.03;
  color:#000;
}
.panel__heading--invite{ margin-left:clamp(0px, .68vw, 13px); margin-bottom:clamp(20px, 2.14vw, 41px); }

.panel__bar{
  display:block; width:clamp(120px, 9.27vw, 178px); height:5px;
  margin:clamp(28px, 2.71vw, 52px) 0 clamp(22px, 1.88vw, 36px);
  background:var(--orange);
}
.panel__lead{ font-size:var(--fs-ui); line-height:1.3; color:var(--ink); margin-bottom:clamp(16px, 1.25vw, 24px); }

.field{ margin-bottom:clamp(16px, 1.32vw, 25.3px); }
/* the field just before the status line / buttons: the gap comes from .panel__actions */
.field:has(+ .form-status), .field:has(+ .panel__actions){ margin-bottom:0; }
.field > label{
  display:block; margin-bottom:clamp(6px, .4vw, 7px);
  font-size:var(--fs-label); font-weight:400; line-height:1.2;
  text-transform:uppercase; color:var(--ink);
}
.field label em{ font-style:normal; margin-left:.35em; }
.field label .sep{ margin-inline:.3em; }
.field label .opt{ margin-left:.5em; }

.field input,
.field textarea{
  width:100%;
  font-family:var(--sans); font-size:var(--fs-ui);
  color:var(--ink);
  background:transparent;
  border:1px solid #b1b1b1; border-radius:0;
  height:clamp(46px, 2.76vw, 53px);
  padding:0 clamp(14px, 1.04vw, 20px);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea{
  display:block;
  height:clamp(96px, 5.42vw, 104px);
  padding-top:clamp(10px, .8vw, 14px);
  resize:vertical; line-height:1.45;
}
.panel--invite .field input,
.panel--invite .field textarea{ background:#fff; border-color:#e3e3e3; }
.field ::placeholder{ color:#cfcecd; opacity:1; }
.field input:focus, .field textarea:focus{
  outline:0; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(225,139,26,.16);
}

.field.is-invalid input,
.field.is-invalid textarea{ border-color:#c0392b; }
.err{ display:none; margin-top:6px; font-size:var(--fs-label); color:#c0392b; }
.field.is-invalid .err{ display:block; }

.panel__actions{
  margin-top:auto; padding-top:clamp(20px, 2.24vw, 43px);
  display:flex; justify-content:flex-end;
}
.btn--signup{ width:clamp(150px, 9.58vw, 184px); padding:0; }

/* spam trap: off-screen for people, still in the DOM for bots */
.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* privacy line under the signup fields */
.privacy-note{
  font-size:var(--fs-ui); line-height:1.5; color:#6f6862; max-width:40em;
}

.form-status{
  margin-top:8px; padding:12px 14px;
  font-size:var(--fs-label); line-height:1.45;
  background:#fbeeea; color:#8a2a1a; border-left:3px solid #c0392b;
}

.done{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(12px,1vw,18px); padding-top:clamp(20px,2.6vw,50px); }
.done img{ width:clamp(32px, 2.08vw, 40px); height:auto; }
.done h3{ font-family:var(--serif); font-weight:600; font-size:var(--fs-card-t); line-height:1.2; }
.done h3:focus{ outline:none; }
.done p{ color:var(--gray); font-size:var(--fs-ui); line-height:1.55; max-width:34em; }
.done__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:clamp(8px, 1vw, 16px); }

@media (max-width: 860px){
  .panels{ grid-template-columns:1fr; }
  .panel{ min-height:0; }
  .panel__heading--invite{ margin-left:0; }
  .panel__actions .btn--signup{ width:100%; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--white); }
.footer__mark{
  text-align:center;
  padding:clamp(56px, 5.21vw, 100px) var(--gutter) clamp(40px, 3.1vw, 60px);
}
.footer__mark img{ width:clamp(200px, 15.57vw, 299px); height:auto; margin-inline:auto; }
.footer__tagline{
  margin-top:clamp(10px, .73vw, 14px);
  font-size:var(--fs-footer-tag); font-weight:500; line-height:1.3;
  letter-spacing:var(--track);
  color:var(--ink);
}
.footer__bar{
  display:grid; place-items:center;
  min-height:clamp(56px, 3.75vw, 72px);
  padding:14px var(--gutter);
  background:var(--ink);
  color:#b4b4b4; text-align:center;
  font-size:var(--fs-footer);
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .hero__content, .hero__field, .hero__ribbons, .hero__std{ animation:none; }
  .hero__std, .hero__std.is-gone{ transition:none; }
}