/* ============================================================
   Sanctuary Church · design system
   Palette + type per SAN_Brand Guidelines_2024
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Primary palette */
  --dove:#FAF8F5;
  --sky:#B5C7D4;
  --cobalt:#3D558F;
  --moss:#52501F;
  --summer:#EDB14C;

  /* The highlight colour. Sky reads calmer against the photography than the
     warm yellow did; swap these two lines to go back to Summer. */
  --accent:#B5C7D4;         /* Sky */
  --accent-ink:#2A3A63;     /* text that sits on the accent, 6.1:1 */

  /* Supporting palette (sermon series / accents) */
  --wine:#5C2C2F;      --nectarine:#DF874D;  --barbie:#F2ADCC;
  --dusty-sage:#B3AF92;--muddy-boots:#916036;--strawberry:#D84937;
  --sunburn:#D8694C;   --wasabi:#C4C47D;     --artichoke:#AB9136;
  --cashmere:#7C82D6;  --lilac:#ECDDFE;      --marzipan:#F2EBD7;
  --ballet:#F7EBE3;    --ice:#D1D9E0;        --butter:#F3F1C0;
  --peony:#F0CCB8;     --sherbet:#F6DCDD;

  /* Derived working colours */
  --ink:#2A3A63;              /* body copy on light  10:1 */
  --muted:#5C6B93;            /* secondary copy      4.8:1 */
  --hairline:rgba(61,85,143,.16);
  --hairline-strong:rgba(61,85,143,.32);
  --hairline-inv:rgba(250,248,245,.22);

  /* Type */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --step--1:clamp(.8rem,.77rem + .15vw,.875rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.075rem);
  --step-1:clamp(1.15rem,1.06rem + .45vw,1.4rem);
  --step-2:clamp(1.4rem,1.2rem + .95vw,2rem);
  --step-3:clamp(1.9rem,1.5rem + 1.9vw,3.1rem);
  --step-4:clamp(2.6rem,1.8rem + 3.6vw,5rem);
  --step-5:clamp(3.2rem,1.9rem + 6vw,7.5rem);
  --step-6:clamp(3.8rem,1.4rem + 10vw,12rem);

  /* Space */
  --gut:clamp(1.25rem,4vw,3rem);
  --sec:clamp(4.5rem,10vw,9.5rem);
  --maxw:88rem;
  --measure:38ch;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.7s;

  --hdr:76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--dove);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);font-weight:380;
  line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.moss :focus-visible{outline-color:var(--summer)}
::selection{background:var(--summer);color:var(--ink)}

.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{position:absolute;left:var(--gut);top:-100px;z-index:200;background:var(--cobalt);color:var(--dove);padding:.7rem 1.1rem;border-radius:999px;transition:top .2s}
.skip:focus{top:1rem}

/* ---------- 3. Typography ---------- */
.display,h1,h2,h3{
  font-family:var(--serif);font-weight:400;
  line-height:1.02;letter-spacing:-.018em;
  color:var(--cobalt);text-wrap:balance;
}
h1,.h1{font-size:var(--step-5)}
h2,.h2{font-size:var(--step-4)}
h3,.h3{font-size:var(--step-2)}
.h-mega{font-size:var(--step-6);line-height:.86;letter-spacing:-.032em}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

.eyebrow{
  font-family:var(--sans);font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;line-height:1;
  color:var(--muted);display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.5;flex:none}
.eyebrow--plain::before{display:none}

.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink);font-weight:380;letter-spacing:-.011em;max-width:34ch}
p{max-width:var(--measure)}
p.wide{max-width:56ch}
p+p{margin-top:1.1em}
.prose p+p{margin-top:1.1em}
.prose{max-width:56ch}

/* Inverted surfaces */
.dark{background:var(--cobalt);color:var(--dove)}
.dark h1,.dark h2,.dark h3,.dark .display{color:var(--dove)}
.dark .eyebrow{color:var(--sky)}
.dark p{color:rgba(250,248,245,.82)}
.moss{background:var(--moss);color:var(--dove)}
.moss h1,.moss h2,.moss h3,.moss .display{color:var(--dove)}
.moss .eyebrow{color:var(--butter)}
.moss p{color:rgba(250,248,245,.82)}
.sky-bg{background:var(--sky)}
.marzipan-bg{background:var(--marzipan)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:104rem}
.wrap--narrow{max-width:60rem}
section{position:relative}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.grid{display:grid;gap:var(--gut)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g12{grid-template-columns:repeat(12,1fr)}
.rule{height:1px;background:var(--hairline);border:0;margin:0}
.dark .rule,.moss .rule{background:var(--hairline-inv)}
.stack-sm>*+*{margin-top:.75rem}
.stack>*+*{margin-top:1.5rem}
.stack-lg>*+*{margin-top:2.5rem}

/* ---------- 5. Brand marks ---------- */
.mark{display:block;color:var(--cobalt)}
.mark svg{width:100%;height:auto;fill:currentColor}
.icon-star{width:1em;height:1em;display:inline-block;vertical-align:-.08em}
.icon-star svg{width:100%;height:100%;fill:currentColor}

/* ---------- 6. Buttons ---------- */
.btn{
  --bg:var(--cobalt);--fg:var(--dove);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 1.9rem;border-radius:999px;border:1px solid transparent;
  background:var(--bg);color:var(--fg);
  font-size:var(--step--1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--summer);transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink)}
.btn__arrow{width:.85em;height:.85em;flex:none;transition:transform .45s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(.25em)}
.btn--ghost{--bg:transparent;--fg:var(--cobalt);border-color:var(--hairline-strong)}
.hero .btn--ghost,.phero--img .btn--ghost,.cta .btn--ghost{--fg:var(--dove);border-color:rgba(250,248,245,.45)}
.btn--ghost:hover{border-color:transparent}
.dark .btn--ghost,.moss .btn--ghost{--fg:var(--dove);border-color:var(--hairline-inv)}
.btn--light{--bg:var(--dove);--fg:var(--cobalt)}
.btn--summer{--bg:var(--summer);--fg:var(--ink)}
.btn--summer::after{background:var(--cobalt)}
.btn--summer:hover,.btn--summer:focus-visible{color:var(--dove)}
.btn--accent{--bg:var(--accent);--fg:var(--accent-ink)}
.btn--accent::after{background:var(--cobalt)}
.btn--accent:hover,.btn--accent:focus-visible{color:var(--dove)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* text link with underline sweep */
.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--step--1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cobalt);padding-bottom:.35rem;position:relative;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(0)}
.dark .tlink,.moss .tlink{color:var(--summer)}

/* ---------- 7. Animation base states ---------- */
.js [data-anim]{will-change:transform,opacity}
.js [data-anim="fade"]{opacity:0;transform:translate3d(0,26px,0)}
.js [data-anim="reveal"]{clip-path:inset(0 0 100% 0)}
.js [data-anim="scale"]{opacity:0;transform:scale(.94)}
.js .line-mask{display:block;overflow:hidden}
.js .line-inner{display:block;transform:translate3d(0,110%,0)}
.js [data-anim="stagger"]>*{opacity:0;transform:translate3d(0,22px,0)}
.js .media[data-reveal] .media__img{transform:scale(1.28)}
.js .media[data-reveal]{clip-path:inset(0 0 100% 0)}
.no-js .line-mask{overflow:visible}
.no-js .line-inner{transform:none}

/* ---------- 8. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:90;height:var(--hdr);
  display:flex;align-items:center;
  transition:transform .5s var(--ease),background-color .4s ease,box-shadow .4s ease;
}
.hdr__in{width:100%;max-width:104rem;margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.hdr__logo{display:block;width:clamp(150px,16vw,196px);color:var(--cobalt);transition:color .4s ease}
.hdr__logo svg{width:100%;height:auto}
.hdr--solid{background:rgba(250,248,245,.86);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--hairline)}
.hdr--hidden{transform:translateY(-101%)}
.hdr--over{color:var(--dove)}
.hdr--over .hdr__logo{color:var(--dove)}
.hdr--over .nav a:not(.btn){color:var(--dove)}
.hdr--over .burger{color:var(--dove)}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
/* :not(.btn) matters. A plain `.nav a` rule outranks `.btn`, which would repaint
   the header button's label in body ink on its own cobalt fill. */
.nav a:not(.btn){
  font-size:var(--step--1);font-weight:500;letter-spacing:.04em;color:var(--ink);
  position:relative;padding-block:.4rem;transition:color .3s ease;
}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:.1rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.hdr .btn{padding:.85rem 1.4rem}
.nav-desktop{display:none}
@media(min-width:1060px){
  .nav-desktop{display:flex}
  .burger{display:none!important}
}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:46px;height:46px;padding:0 9px;background:none;border:0;cursor:pointer;color:var(--cobalt);
}
.burger span{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease),opacity .3s ease}
.burger span:nth-child(2){width:70%;margin-left:auto}
body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
body.menu-open .burger{color:var(--dove)}

/* Menu overlay */
.menu{
  position:fixed;inset:0;z-index:80;background:var(--cobalt);color:var(--dove);
  display:grid;grid-template-rows:var(--hdr) 1fr auto;
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
body.menu-open .menu{pointer-events:auto}
.menu__nav{align-self:center;padding-inline:var(--gut);padding-block:2rem;overflow-y:auto}
.menu__list{display:flex;flex-direction:column;gap:clamp(.1rem,1vw,.5rem);max-width:104rem;margin-inline:auto;width:100%}
.menu__item{overflow:hidden}
.menu__link{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--serif);font-size:clamp(2.4rem,8.5vw,6rem);line-height:1.06;
  color:var(--dove);transition:color .35s ease,transform .5s var(--ease);
}
.menu__link:hover{color:var(--summer);transform:translateX(.6rem)}
.menu__num{font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.1em;color:var(--sky);flex:none}
.menu__foot{padding:1.6rem var(--gut) 2.2rem;border-top:1px solid var(--hairline-inv)}
.menu__foot-in{max-width:104rem;margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:space-between;font-size:var(--step--1)}
.menu__foot a:not(.btn){color:var(--sky)}
.menu__foot a:not(.btn):hover{color:var(--summer)}

/* ---------- 9. Page curtain ---------- */
/* The curtain and the custom cursor are purely JS ornaments. Without the `js`
   flag they must not exist, or a no-script visitor gets a blank blue screen. */
.curtain{display:none}
.js .curtain{position:fixed;inset:0;z-index:120;background:var(--cobalt);display:grid;place-items:center;pointer-events:none;transform:translateY(0)}
.curtain__mark{width:clamp(46px,6vw,74px);color:var(--dove);opacity:.95}
.curtain__mark svg{width:100%;height:auto;fill:currentColor}
body.is-loaded .curtain{pointer-events:none}

/* ---------- 10. Media ---------- */
.media{position:relative;overflow:hidden;background:rgba(42,58,99,.05);border-radius:2px}
.media__img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.media--tall{aspect-ratio:3/4}
.media--portrait{aspect-ratio:4/5}
.media--square{aspect-ratio:1}
.media--wide{aspect-ratio:16/10}
.media--cine{aspect-ratio:21/9}
.media--full{height:100%}
.media__cap{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  background:rgba(250,248,245,.92);color:var(--ink);
  font-size:var(--step--1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:999px;
}
.media--parallax .media__img{height:118%;position:absolute;inset:auto 0 auto 0;top:-9%}

/* Any image that drifts needs headroom above and below, or the container
   colour shows through at the edge of the travel. */
.media img[data-parallax],
.season__media img[data-parallax],
.rail__item img[data-parallax]{height:128%;position:absolute;left:0;top:-14%}

/* ---------- 11. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:var(--dove);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:124%;object-fit:cover;object-position:50% 42%;position:absolute;top:-12%;left:0;will-change:transform}

/* Rotating hero. Frames stack; only the first is painted until JS takes over,
   so a no-JS or reduced-motion visitor simply gets one still photograph. */
.hero__bg .frame{position:absolute;inset:0;overflow:hidden}
.hero__bg .frame:nth-child(1) img{object-position:50% 34%}
.hero__bg .frame:nth-child(2) img{object-position:50% 44%}
.hero__bg .frame:nth-child(3) img{object-position:52% 14%}
.hero__bg .frame+.frame{opacity:0}
.hero__dots{
  position:absolute;left:var(--gut);bottom:clamp(1.1rem,2.4vw,1.6rem);z-index:4;
  display:flex;gap:.45rem;align-items:center;
}
.hero__dots button{
  width:34px;height:3px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(250,248,245,.34);position:relative;overflow:hidden;
  transition:background .3s ease;
}
.hero__dots button::after{
  content:"";position:absolute;inset:0;background:var(--dove);
  transform:scaleX(0);transform-origin:left;
}
.hero__dots button[aria-current="true"]{background:rgba(250,248,245,.5)}
@media(max-width:640px){.hero__dots button{width:24px}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(20,28,52,.6) 0%,rgba(20,28,52,.28) 42%,rgba(20,28,52,0) 78%),
    linear-gradient(to top,rgba(20,28,52,.84) 0%,rgba(20,28,52,.46) 34%,rgba(20,28,52,.18) 62%,rgba(20,28,52,.5) 100%);
}
.hero__in{width:100%;max-width:104rem;margin-inline:auto;padding:0 var(--gut) clamp(2.5rem,6vw,4.5rem);position:relative;z-index:2}
.hero__kicker{color:var(--sky);margin-bottom:clamp(1rem,2.5vw,1.8rem)}
.hero__kicker::before{background:var(--sky)}
.hero h1{color:var(--dove);font-size:clamp(3rem,8.1vw,8.4rem);line-height:.94;letter-spacing:-.028em;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__foot{
  margin-top:clamp(1.8rem,4vw,3rem);display:flex;flex-wrap:wrap;
  gap:1.5rem 2.5rem;align-items:flex-end;justify-content:space-between;
}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem}
.hero__meta div{min-width:9rem}
.hero__meta dt{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:.35rem}
.hero__meta dd{margin:0;font-family:var(--serif);font-size:var(--step-2);line-height:1.1;color:var(--dove)}
.hero__scroll{
  position:absolute;right:calc(var(--gut) - .25rem);top:50%;z-index:3;
  display:none;flex-direction:column;align-items:center;gap:.9rem;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
}
@media(min-width:1100px){.hero__scroll{display:flex}}
.hero__scroll i{display:block;width:1px;height:64px;background:linear-gradient(var(--sky),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--summer);animation:scrollpulse 2s var(--ease) infinite}
@keyframes scrollpulse{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* page hero (interior pages) */
.phero{position:relative;padding-top:calc(var(--hdr) + clamp(3.5rem,9vw,7rem));padding-bottom:clamp(2.5rem,6vw,4.5rem);overflow:hidden}
.phero h1{max-width:16ch}
.phero__lede{margin-top:1.6rem;max-width:44ch}
.phero--img{color:var(--dove);min-height:clamp(60vh,72svh,80vh);display:flex;align-items:flex-end;isolation:isolate}
.phero--img .hero__bg{z-index:-2}
.phero--img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,28,52,.8),rgba(20,28,52,.3) 55%,rgba(20,28,52,.34))}
.phero--img h1{color:var(--dove)}
.phero--img .eyebrow{color:var(--sky)}
.phero--img p{color:rgba(250,248,245,.86)}

/* ---------- 12. Marquee ---------- */
.marquee{overflow:hidden;padding-block:clamp(1.1rem,2.4vw,1.9rem);border-block:1px solid var(--hairline);white-space:nowrap}
.dark .marquee,.moss .marquee{border-color:var(--hairline-inv)}
.marquee__track{display:inline-flex;align-items:center;gap:2.5rem;will-change:transform}
.marquee__item{
  display:inline-flex;align-items:center;gap:2.5rem;
  font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1;
  color:var(--cobalt);letter-spacing:-.015em;
}
.dark .marquee__item,.moss .marquee__item{color:var(--dove)}
.marquee__item .icon-star{color:var(--summer);font-size:.5em}
.marquee__item i{font-style:italic}

/* ---------- 13. Statement ---------- */
.statement{text-align:center}
.statement .h-mega{max-width:16ch;margin-inline:auto}
.scripture{font-family:var(--serif);font-style:italic;font-size:var(--step-3);line-height:1.2;color:var(--cobalt);max-width:22ch}
.scripture__ref{display:block;margin-top:1.2rem;font-family:var(--sans);font-style:normal;font-size:var(--step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dark .scripture,.moss .scripture{color:var(--dove)}
.dark .scripture__ref{color:var(--sky)}
.moss .scripture__ref{color:var(--butter)}

/* highlight-on-scroll paragraph */
.hl{font-family:var(--serif);font-size:var(--step-3);line-height:1.22;letter-spacing:-.02em;max-width:24ch;color:rgba(61,85,143,.26)}
.hl .w{color:rgba(61,85,143,.26);transition:color .35s linear}
.hl .w.on{color:var(--cobalt)}
.hl--lg{font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.1;letter-spacing:-.025em;max-width:20ch}
.dark .hl,.dark .hl .w,.moss .hl,.moss .hl .w{color:rgba(250,248,245,.26)}
.dark .hl .w.on{color:var(--dove)}
.moss .hl .w.on{color:var(--butter)}
.no-js .hl,.no-js .hl .w{color:var(--cobalt)}

/* ---------- 14. Wells (pinned horizontal) ---------- */
.wells{background:var(--cobalt);color:var(--dove);overflow:hidden}
.wells__view{height:100svh;display:flex;align-items:center}
.wells__track{display:flex;height:100%;align-items:stretch}
.well{
  flex:0 0 100vw;width:100vw;height:100%;
  display:grid;align-content:center;gap:clamp(1.2rem,3vw,2.2rem);
  padding:calc(var(--hdr) + 2rem) var(--gut) 3rem;
}
.well--intro{align-content:center}
.well__grid{width:100%;max-width:104rem;margin-inline:auto;display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.well__grid{grid-template-columns:1.05fr .95fr}}
.well__num{font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.2em;color:var(--sky)}
.well h2{font-size:var(--step-5);color:var(--dove);line-height:.94}
/* ch units resolve against the container's own font-size, so panel widths are
   set in rem and only the headings are measured in characters. */
.well__body{max-width:34rem}
.well--intro .well__body{max-width:46rem}
.well--intro h2{font-size:clamp(2.1rem,4.5vw,3.8rem);line-height:1.04;max-width:16ch}
.well--intro p{max-width:42ch}
.well__values{margin-top:clamp(1.2rem,3vw,2rem);display:grid;gap:.1rem;max-width:30rem}
.well__values li{
  padding:.95rem 0;border-top:1px solid var(--hairline-inv);
  font-family:var(--serif);font-style:italic;font-size:var(--step-1);color:var(--dove);
  display:flex;align-items:center;gap:.9rem;
}
.well__values li:last-child{border-bottom:1px solid var(--hairline-inv)}
.well__values .icon-star{color:var(--summer);font-size:.6em;flex:none}
.well__media{position:relative;aspect-ratio:4/5;height:min(60vh,600px);width:auto;margin-inline:auto;justify-self:center;overflow:hidden}
.well__media img{width:100%;height:100%;object-fit:cover}
.pillar{display:block;height:clamp(52px,6.5vw,86px);color:var(--summer)}
.pillar svg{height:100%;width:auto;fill:currentColor}
.pillar--sm{height:clamp(38px,4vw,52px)}
.well__pillar{margin-bottom:1rem}
.wells__prog{position:absolute;left:var(--gut);right:var(--gut);bottom:2rem;height:1px;background:var(--hairline-inv);z-index:3}
.wells__prog i{display:block;height:100%;width:0;background:var(--summer)}
.wells__stack{display:grid;gap:0}
@media(max-width:899px){
  .wells__view{height:auto;display:block}
  .wells__track{display:grid;grid-template-columns:1fr;height:auto}
  .well{flex:auto;width:auto;padding-block:clamp(3.5rem,10vw,5rem);border-top:1px solid var(--hairline-inv)}
  .well:first-child{border-top:0}
  .wells__prog{display:none}
}

/* ---------- 15. Season ---------- */
.season{position:relative;overflow:hidden}
.season__word{
  font-family:var(--serif);font-size:clamp(4rem,17vw,15rem);line-height:.82;
  letter-spacing:-.04em;color:var(--cobalt);white-space:nowrap;
}
.season__grid{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:end}
@media(min-width:900px){.season__grid{grid-template-columns:1fr 1fr}}
.season__badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--step--1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.season__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.season__media img{width:100%;height:100%;object-fit:cover}

/* ---------- 16. Cards / events ---------- */
.card{
  position:relative;display:flex;flex-direction:column;gap:1.1rem;
  background:var(--dove);border:1px solid var(--hairline);border-radius:3px;
  padding:clamp(1.3rem,2.4vw,2rem);overflow:hidden;
  transition:border-color .45s var(--ease),transform .5s var(--ease);
}
.card:hover{border-color:var(--hairline-strong);transform:translateY(-4px)}
.card__media{position:relative;overflow:hidden;aspect-ratio:4/3;margin:calc(-1*clamp(1.3rem,2.4vw,2rem)) calc(-1*clamp(1.3rem,2.4vw,2rem)) 0}
.card__media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card h3{font-size:var(--step-2)}
.card__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:var(--step--1);color:var(--muted);letter-spacing:.04em}
.card__meta span{display:inline-flex;align-items:center;gap:.4rem}

.evt{
  display:grid;gap:clamp(1rem,3vw,2.5rem);align-items:center;
  padding-block:clamp(1.6rem,3.4vw,2.6rem);border-top:1px solid var(--hairline);
  transition:background-color .4s ease;
}
@media(min-width:820px){.evt{grid-template-columns:8.5rem 1fr 15rem auto}}
.evt:last-child{border-bottom:1px solid var(--hairline)}
.evt__date{display:flex;align-items:baseline;gap:.5rem}
.evt__day{font-family:var(--serif);font-size:var(--step-4);line-height:.9;color:var(--cobalt)}
.evt__mon{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.evt h3{font-size:var(--step-2)}
.evt p{font-size:var(--step-0);color:var(--muted);max-width:46ch;margin-top:.5rem}
.evt__where{font-size:var(--step--1);color:var(--muted);letter-spacing:.03em;line-height:1.5}
.dark .evt,.moss .evt{border-color:var(--hairline-inv)}
.dark .evt__day,.moss .evt__day{color:var(--dove)}
.dark .evt__mon,.dark .evt__where,.dark .evt p,
.moss .evt__mon,.moss .evt__where,.moss .evt p{color:rgba(250,248,245,.74)}

/* sticky stacked cards */
.stackcards{display:grid;gap:2rem}
@media(min-width:900px){
  .stackcards{display:block}
  .stackcards .sticker{position:sticky;top:calc(var(--hdr) + 3vh);margin-bottom:2.5rem}
}

/* ---------- 17. Split feature ---------- */
.feature{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:center}
@media(min-width:900px){
  .feature{grid-template-columns:1fr 1fr}
  .feature--rev .feature__media{order:2}
}
.feature__body{max-width:38rem}
.feature__body h2{max-width:15ch}
.feature__body .lede{max-width:32ch}
.feature__body .eyebrow{margin-bottom:1.2rem}
.feature__body h2{margin-bottom:1.2rem}
.feature__body .btn-row,.feature__body .tlink{margin-top:1.8rem}

/* offset image duo */
.duo{display:grid;gap:var(--gut);align-items:end}
@media(min-width:760px){
  .duo{grid-template-columns:1.15fr .85fr}
  .duo>*:last-child{margin-bottom:clamp(2rem,7vw,6rem)}
}

/* ---------- 18. Numbers ---------- */
.figs{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:700px){.figs{grid-template-columns:repeat(3,1fr)}}
.fig__n{font-family:var(--serif);font-size:var(--step-5);line-height:.92;color:var(--cobalt);letter-spacing:-.03em}
.dark .fig__n{color:var(--summer)}
.moss .fig__n{color:var(--butter)}
.fig__l{margin-top:.5rem;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dark .fig__l{color:var(--sky)}
.moss .fig__l{color:var(--butter)}

/* ---------- 19. Accordion ---------- */
.acc{border-top:1px solid var(--hairline)}
.acc__item{border-bottom:1px solid var(--hairline)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:none;border:0;cursor:pointer;text-align:left;padding:clamp(1.1rem,2.4vw,1.7rem) 0;
  font-family:var(--serif);font-size:var(--step-2);color:var(--cobalt);line-height:1.2;
}
.acc__ic{position:relative;width:1.1rem;height:1.1rem;flex:none}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.acc__ic::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.acc__ic::after{top:0;left:50%;height:100%;width:1.5px;transform:translateX(-50%);transition:transform .4s var(--ease),opacity .3s}
.acc__item[data-open] .acc__ic::after{transform:translateX(-50%) scaleY(0);opacity:0}
.acc__panel{overflow:hidden;height:0}
.acc__panel-in{padding-bottom:1.6rem;color:var(--muted);max-width:60ch}
.acc__panel-in p+p{margin-top:.9rem}

/* ---------- 20. Links list ---------- */
.linklist{border-top:1px solid var(--hairline)}
.linklist a{
  display:grid;grid-template-columns:3.5rem 1fr auto;gap:1rem;align-items:center;
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;border-bottom:1px solid var(--hairline);
  transition:padding-left .45s var(--ease),color .3s ease;
}
.linklist a:hover{padding-left:.9rem;color:var(--cobalt)}
.linklist__n{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;color:var(--muted)}
.linklist__t{font-family:var(--serif);font-size:var(--step-2);color:var(--cobalt);line-height:1.15}
.linklist__a{width:1.1rem;color:var(--muted);transition:transform .45s var(--ease)}
.linklist a:hover .linklist__a{transform:translateX(.35rem)}

/* ---------- 21. Instagram ---------- */
.ig__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
@media(min-width:700px){.ig__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.ig__grid{grid-template-columns:repeat(6,1fr)}}
.ig__tile{position:relative;aspect-ratio:1;overflow:hidden;background:rgba(42,58,99,.05);display:block}
.ig__tile img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform .8s var(--ease),filter .5s ease}
.ig__tile:hover img{transform:scale(1.07)}
.ig__tile::after{
  content:"";position:absolute;inset:0;background:var(--cobalt);opacity:0;transition:opacity .45s ease;
}
.ig__tile:hover::after{opacity:.22}
.ig__head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.8rem}

/* ---------- 22. Sunday School ---------- */
.ss{--ss-ink:#3D558F}
.ss-hero{background:var(--butter)}
.greenhouse{position:relative;overflow:hidden}
.greenhouse__lines{display:grid;gap:.45rem;max-width:min(46rem,100%)}
.greenhouse__lines li{
  font-family:var(--serif);font-size:clamp(1.15rem,2.3vw,1.75rem);line-height:1.3;color:var(--cobalt);
  display:flex;gap:.8rem;align-items:baseline;
}
.greenhouse__lines .icon-star{font-size:.55em;flex:none}
.sprk{position:absolute;pointer-events:none;opacity:.9}
.ss-swatch{display:flex;gap:.4rem;flex-wrap:wrap}
.ss-swatch i{width:2.1rem;height:2.1rem;border-radius:999px;display:block}
.ss-card{border-radius:18px;padding:clamp(1.4rem,3vw,2.2rem);color:var(--ink);position:relative;overflow:hidden}
.ss-card h3{color:inherit}
.ss-card__ic{width:clamp(70px,9vw,110px);margin-bottom:1.2rem}
.ss-grid{display:grid;gap:var(--gut)}
@media(min-width:820px){.ss-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 23. Giving ---------- */
.give-card{
  background:var(--dove);border:1px solid var(--hairline);border-radius:4px;
  padding:clamp(1.5rem,3.4vw,2.6rem);
}
.dark .give-card,.moss .give-card{background:rgba(250,248,245,.06);border-color:var(--hairline-inv)}
.give-row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;padding-block:.95rem;border-bottom:1px solid var(--hairline)}
.dark .give-row,.moss .give-row{border-color:var(--hairline-inv)}
.give-row:last-child{border-bottom:0}
.give-row dt{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dark .give-row dt{color:var(--sky)}
.moss .give-row dt{color:var(--butter)}
.give-row dd{margin:0;font-family:var(--serif);font-size:var(--step-2);color:var(--cobalt);letter-spacing:.01em}
.dark .give-row dd,.moss .give-row dd{color:var(--dove)}
.copy-btn{
  border:1px solid var(--hairline-strong);background:none;border-radius:999px;
  padding:.4rem .85rem;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;color:var(--muted);transition:.3s ease;
}
.copy-btn:hover{color:var(--cobalt);border-color:var(--cobalt)}
.copy-btn[data-copied]{color:var(--moss);border-color:var(--moss)}
.dark .copy-btn,.moss .copy-btn{border-color:var(--hairline-inv);color:var(--sky)}
.dark .copy-btn:hover,.moss .copy-btn:hover{color:var(--summer);border-color:var(--summer)}

/* ---------- 24. CTA ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;color:var(--dove);text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:128%;object-fit:cover;position:absolute;top:-14%;left:0}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(28,38,70,.72)}
.cta h2{color:var(--dove);max-width:18ch;margin-inline:auto}
.cta p{color:rgba(250,248,245,.86);margin-inline:auto;max-width:46ch}

/* ---------- 25. Footer ---------- */
.ftr{background:var(--cobalt);color:var(--dove);padding-top:clamp(3.5rem,8vw,6rem)}
.ftr__mark{width:min(100%,104rem);margin-inline:auto;color:var(--dove);opacity:.96;padding-inline:var(--gut)}
.ftr__mark svg{width:100%;height:auto;fill:currentColor}
.ftr__grid{display:grid;gap:2.5rem;padding-block:clamp(2.5rem,6vw,4rem)}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.3fr 1fr 1fr}}
.ftr h4{font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:1.1rem}
.ftr a:not(.btn){color:rgba(250,248,245,.84);transition:color .3s ease}
.ftr a:not(.btn):hover{color:var(--summer)}
.ftr__links{display:grid;gap:.6rem}
.ftr__addr{font-family:var(--serif);font-size:var(--step-2);line-height:1.2;color:var(--dove)}
.ftr__addr span{display:block}
.ftr__bot{border-top:1px solid var(--hairline-inv);padding-block:1.5rem 2rem;font-size:var(--step--1);color:rgba(250,248,245,.6)}
.ftr__bot-in{display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between}
.socials{display:flex;gap:.6rem}
.socials a{
  width:2.7rem;height:2.7rem;border-radius:999px;border:1px solid var(--hairline-inv);
  display:grid;place-items:center;transition:.4s var(--ease);
}
.socials a:hover{background:var(--summer);border-color:var(--summer);color:var(--ink);transform:translateY(-3px)}
.socials svg{width:1.05rem;height:1.05rem;fill:currentColor}

/* ---------- 26. Cursor ---------- */
.cursor{display:none}
.js .cursor{position:fixed;top:0;left:0;z-index:150;pointer-events:none;mix-blend-mode:difference;display:none;opacity:0}
@media(hover:hover) and (pointer:fine){.js .cursor{display:block}}
.cursor__dot{width:9px;height:9px;border-radius:999px;background:var(--dove);transform:translate(-50%,-50%)}
.cursor__ring{
  position:absolute;top:0;left:0;width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(250,248,245,.7);transform:translate(-50%,-50%);
}

/* ---------- 27. Utilities ---------- */
.center{text-align:center}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.5rem}.mt-4{margin-top:4rem}
.mb-2{margin-bottom:1.5rem}.mb-3{margin-bottom:2.5rem}
.mxa{margin-inline:auto}
.op-70{opacity:.7}
.nowrap{white-space:nowrap}
.hide-sm{display:none}
@media(min-width:760px){.hide-sm{display:revert}.hide-lg{display:none}}

@media(max-width:759px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .hero h1{font-size:clamp(3rem,15vw,5rem)}
}
@media(min-width:760px) and (max-width:1059px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 28. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-anim],.js [data-anim="reveal"],.js .media[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .line-inner{transform:none!important}
  .js [data-anim="stagger"]>*{opacity:1!important;transform:none!important}
  .cursor{display:none!important}
  .hero__scroll i::after{display:none}
}

/* ---------- 29. Masked brand lockup ----------
   One SVG file, any brand colour, via mask + currentColor. */
.lockup{
  display:block;width:100%;aspect-ratio:399.67/70.082;
  background-color:currentColor;
  -webkit-mask:url("/assets/logo/sc-lockup-horizontal.svg") no-repeat center/contain;
  mask:url("/assets/logo/sc-lockup-horizontal.svg") no-repeat center/contain;
}
.lockup--vert{aspect-ratio:76.099/169.512;
  -webkit-mask-image:url("/assets/logo/sc-lockup-vertical.svg");
  mask-image:url("/assets/logo/sc-lockup-vertical.svg")}
.lockup--word{aspect-ratio:147.75/40.57;
  -webkit-mask-image:url("/assets/logo/sc-wordmark.svg");
  mask-image:url("/assets/logo/sc-wordmark.svg")}
.lockup--sub{aspect-ratio:53.486/70.716;
  -webkit-mask-image:url("/assets/logo/sc-submark.svg");
  mask-image:url("/assets/logo/sc-submark.svg")}
@supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .lockup{background:none}
  .lockup::after{content:"Sanctuary Church";font-family:var(--serif);font-size:1.5rem;color:currentColor}
}
.ftr__mark .lockup{color:var(--dove);opacity:.96}

/* ---------- 30. Inverted surfaces, remaining components ---------- */
.dark .acc,.moss .acc,
.dark .acc__item,.moss .acc__item,
.dark .linklist,.moss .linklist,
.dark .linklist a,.moss .linklist a{border-color:var(--hairline-inv)}
.dark .acc__btn,.moss .acc__btn,
.dark .linklist__t,.moss .linklist__t{color:var(--dove)}
.dark .acc__panel-in,.moss .acc__panel-in,
.dark .linklist__n,.moss .linklist__n,
.dark .linklist__a,.moss .linklist__a{color:rgba(250,248,245,.74)}
.dark .linklist a:hover,.moss .linklist a:hover{color:var(--summer)}
.dark .card__meta,.moss .card__meta{color:rgba(250,248,245,.7)}
.dark .card,.moss .card{background:rgba(250,248,245,.06);border-color:var(--hairline-inv)}
.dark .card h3,.moss .card h3{color:var(--dove)}
.dark .card p,.moss .card p{color:rgba(250,248,245,.8)}
.dark .card:hover,.moss .card:hover{border-color:rgba(250,248,245,.4)}

/* ---------- 31. Photo rail ----------
   Full-bleed strip of photography that drifts sideways as the page scrolls.
   Not pinned, so it never holds the reader up. */
.rail{overflow:hidden;padding-block:clamp(2rem,5vw,4rem)}
.rail__track{display:flex;gap:clamp(.7rem,1.6vw,1.4rem);width:max-content;will-change:transform;padding-inline:var(--gut)}
.rail__item{position:relative;overflow:hidden;flex:none;background:rgba(42,58,99,.05);border-radius:2px}
.rail__item img{width:100%;height:100%;object-fit:cover;display:block}
.rail__item--tall{width:clamp(200px,26vw,340px);aspect-ratio:3/4}
.rail__item--wide{width:clamp(280px,38vw,520px);aspect-ratio:4/3}
.rail__item--sq{width:clamp(200px,26vw,340px);aspect-ratio:1}
.rail__item--lift{align-self:flex-start;margin-top:clamp(1rem,3vw,2.6rem)}
.rail__item--drop{align-self:flex-end;margin-bottom:clamp(1rem,3vw,2.6rem)}
.rail__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(1.2rem,3vw,2rem)}

/* ---------- 32. Sundays info strip ---------- */
.info{display:grid;gap:clamp(1.2rem,3vw,2.5rem)}
@media(min-width:760px){.info{grid-template-columns:repeat(3,1fr)}}
.info__k{font-size:var(--step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.info__v{font-family:var(--serif);font-size:var(--step-2);line-height:1.15;color:var(--cobalt)}
.info__v small{display:block;font-family:var(--sans);font-size:var(--step--1);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:.45rem;line-height:1.5}
.dark .info__k,.moss .info__k{color:var(--sky)}
.dark .info__v,.moss .info__v{color:var(--dove)}
.dark .info__v small,.moss .info__v small{color:rgba(250,248,245,.72)}

/* ---------- 33. Season, tightened ---------- */
.season--tight{padding-block:clamp(3rem,6vw,5rem)}
.season--tight .season__word{font-size:clamp(3rem,10vw,7rem);line-height:.88}
.season--tight .season__media{aspect-ratio:16/10}
.season__row{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media(min-width:900px){.season__row{grid-template-columns:1fr .9fr}}