/* Grace Story Church — alternative design
   Brand: polished pine + raspberry glace + raisin black on warm white. */
:root{
  /* Official Grace Story Church palette — exact brand formulas */
  --pine:#78A58E;            /* Polished Pine — primary */
  --pine-deep:#5E8B74;
  --pine-soft:#E9F1EC;
  --pine-tint:#F4F8F6;
  --ink:#252525;             /* Raisin Black — primary */
  --ink-soft:rgba(37,37,37,.66);
  --ink-faint:rgba(37,37,37,.45);
  --rasp:#865A71;            /* Raspberry Glace — secondary */
  --ash:#B7B7B7;             /* Ash Grey — secondary */
  --blueberry:#415C77;       /* Velvet Blueberry — secondary */
  --gold:#BE9643;            /* Aurum Gold — secondary */
  --paper:#FCFBF8;
  --line:rgba(37,37,37,.12);
  --maxw:1180px;
  /* Brand fonts (installed locally; Google fallbacks for other machines) */
  --font-sans:'Brandon Grotesque','Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif:'Adobe Caslon Pro','Cormorant Garamond',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Adobe Caslon Pro','Cormorant Garamond',Georgia,serif;
  font-size:20px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* type helpers */
.sans{font-family:'Brandon Grotesque','Montserrat',-apple-system,sans-serif}
.eyebrow{
  font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;
  letter-spacing:.26em;font-size:12px;font-weight:400;color:var(--pine-deep);
}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:400;line-height:1.12;letter-spacing:.005em}
.display{font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:400}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;font-weight:400;padding:14px 26px;border-radius:1px;
  border:1.5px solid var(--pine);transition:.25s ease;cursor:pointer;
}
.btn-solid{background:var(--pine);color:#fff}
.btn-solid:hover{background:var(--pine-deep);border-color:var(--pine-deep)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--pine);color:#fff}
.btn-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ---------- logo mark ---------- */
.logo{display:flex;align-items:center;gap:13px}
.logo svg{width:38px;height:38px;flex:0 0 auto}
.logo img.mark-img{width:42px;height:42px;flex:0 0 auto;object-fit:contain}
.logo .word{font-family:'Brandon Grotesque','Montserrat',sans-serif;line-height:1.05}
.logo .word .l1{font-size:17px;letter-spacing:.16em;font-weight:400}
.logo .word .l1 .st{color:var(--pine-deep)}
.logo .word .l2{font-size:10px;letter-spacing:.42em;font-weight:400;color:var(--ink-soft);text-align:center}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(252,251,248,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;position:relative}
.navlinks{display:flex;align-items:center;gap:34px}
.navlinks a{font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.15em;
  font-size:12px;font-weight:400;color:var(--ink-soft);transition:.2s}
.navlinks a:hover,.navlinks a.active{color:var(--pine-deep)}
.navlinks .btn{padding:11px 20px}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-give{padding:9px 22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.burger{display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:none;border:0;font-size:27px;color:var(--ink);cursor:pointer;line-height:1}

/* compact dropdown menu anchored to the burger */
.menu{position:absolute;top:calc(100% - 8px);right:0;z-index:100;width:240px;
  background:var(--paper);border:1px solid var(--line);border-radius:5px;
  box-shadow:0 18px 44px rgba(37,37,37,.16);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu-links{display:flex;flex-direction:column}
.menu-links a{font-family:var(--font-sans);font-weight:400;text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;color:var(--ink);padding:11px 14px;border-radius:4px;transition:background .15s,color .15s}
.menu-links a:hover{background:var(--pine-soft);color:var(--pine-deep)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;
  /* dark shade of Polished Pine (#78A58E) — brand-anchored, not an invented green */
  background:
    linear-gradient(180deg,rgba(29,40,34,.55),rgba(29,40,34,.45)),
    url('hero.svg') center/cover no-repeat,
    #35493E;}
.hero .inner{position:relative;width:100%;text-align:center;padding:120px 0 60px}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{font-size:clamp(48px,9vw,116px);margin:18px 0 6px}
.hero h1 .a{display:block}
.hero h1 .b{display:block;color:#fff}
.hero p.sub{font-size:clamp(19px,2.4vw,24px);color:rgba(255,255,255,.9);max-width:640px;margin:20px auto 0}
.hero .cta{display:flex;gap:16px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.hero .times{margin-top:46px;font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;color:rgba(255,255,255,.85)}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:108px 0}
.center{text-align:center}
.sec-head{max-width:720px;margin:0 auto 60px;text-align:center}
.sec-head h2{font-size:clamp(34px,5vw,56px);margin-top:16px}
.sec-head p{color:var(--ink-soft);margin-top:18px}

/* welcome */
.welcome{background:var(--pine-tint)}
.welcome .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.welcome h2{font-size:clamp(32px,4.5vw,50px);line-height:1.12}
.welcome .body p{margin-top:18px;color:var(--ink-soft)}
.welcome .body p:first-child{margin-top:0}
.framed{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(135deg,var(--pine),var(--pine-deep))}
.framed .label{position:absolute;inset:0;display:flex;align-items:flex-end;padding:28px;
  color:rgba(255,255,255,.92);font-family:'Brandon Grotesque','Montserrat',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;font-size:11px}

/* beliefs */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--paper);padding:40px 28px;transition:.3s}
.pillar:hover{background:var(--pine-soft)}
.pillar .ic{width:42px;height:42px;margin-bottom:18px;color:var(--pine)}
.pillar:nth-child(1) .ic{color:var(--pine)}        /* Polished Pine */
.pillar:nth-child(2) .ic{color:var(--blueberry)}   /* Velvet Blueberry */
.pillar:nth-child(3) .ic{color:var(--rasp)}        /* Raspberry Glace */
.pillar:nth-child(4) .ic{color:var(--gold)}        /* Aurum Gold */
.pillar h3{font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:15px;margin-bottom:10px}
.pillar p{font-size:17px;color:var(--ink-soft)}

/* formation — alternating */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .art{aspect-ratio:5/4;border-radius:2px;background:
  radial-gradient(120% 120% at 0% 0%,var(--pine-soft),transparent),
  linear-gradient(135deg,#3f5249,#5F8A74);position:relative;overflow:hidden}
.split .art .glyph{position:absolute;right:-10px;bottom:-20px;opacity:.16}
.split h2{font-size:clamp(30px,4vw,46px)}
.split p{margin-top:18px;color:var(--ink-soft)}
.split ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.split ul li{padding-left:26px;position:relative;color:var(--ink)}
.split ul li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:10px;background:var(--pine);border-radius:50%}

/* connect */
.connect{background:var(--ink);color:#fff}
.connect .sec-head h2{color:#fff}
.connect .sec-head p{color:rgba(255,255,255,.7)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}
.info{border:1px solid rgba(255,255,255,.16);padding:34px 28px;text-align:center}
.info .k{font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--pine)}
.info .v{font-size:23px;margin-top:12px}
.info .v small{display:block;font-size:16px;color:rgba(255,255,255,.6);margin-top:4px}

/* give band */
.flagband{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;text-align:center}
.flagband h2{font-size:clamp(32px,5vw,54px)}
.flagband p{max-width:680px;margin:20px auto 0;color:rgba(255,255,255,.92);font-size:20px}
.flagband .cta{margin-top:34px}

/* ---------- leadership page ---------- */
.page-hero{padding:160px 0 70px;text-align:center;background:var(--pine-tint);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(40px,6vw,76px);margin-top:14px}
.page-hero p{max-width:640px;margin:20px auto 0;color:var(--ink-soft)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.member{text-align:center}
.portrait{aspect-ratio:1/1;border-radius:2px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--pine-soft),#d9e5df);border:1px solid var(--line)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member.name-only{border:1px solid var(--line);border-radius:2px;padding:40px 24px;background:#fff}
.member.name-only h3{margin-top:0}
.member p a{color:var(--pine-deep);font-weight:500;border-bottom:1px solid rgba(94,139,116,.4)}
.member p a:hover{border-color:var(--pine-deep)}
.staff-grid{max-width:920px;margin:0 auto}
.portrait svg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:62%;height:auto;color:var(--pine)}
.portrait .ph{position:absolute;top:14px;left:14px;font-family:'Brandon Grotesque','Montserrat',sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--pine-deep);
  background:rgba(255,255,255,.7);padding:3px 8px;border-radius:2px}
.member h3{font-family:'Brandon Grotesque','Montserrat',sans-serif;font-size:18px;letter-spacing:.04em;margin-top:22px}
.member .role{font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--pine-deep);margin-top:6px;font-weight:400}
.member p{font-size:17px;color:var(--ink-soft);margin-top:14px}
.team-label{text-align:center;margin:0 0 44px}
.team-label .eyebrow{display:block}
.team-label h2{font-size:clamp(28px,4vw,42px);margin-top:14px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#fff;padding:70px 0 40px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .logo .l1{color:#fff}
.foot .logo .l1 .st{color:var(--pine)}
.foot .logo .l2{color:rgba(255,255,255,.6)}
.foot-blurb{color:rgba(255,255,255,.7);margin-top:20px;max-width:420px;font-size:18px}
.news h4{font-family:'Brandon Grotesque','Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;margin-bottom:16px}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1;min-width:180px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  color:#fff;padding:13px 14px;font-family:'Brandon Grotesque','Montserrat',sans-serif;font-size:13px;border-radius:1px}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news input:focus{outline:none;border-color:var(--pine)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:28px;flex-wrap:wrap;font-family:'Brandon Grotesque','Montserrat',sans-serif;font-size:12px;
  letter-spacing:.08em;color:rgba(255,255,255,.55)}
.foot-bottom a{color:rgba(255,255,255,.55)}
.foot-bottom a:hover{color:#fff}

/* ---------- the latest ---------- */
.latest-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.col-label{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--pine-deep);margin-bottom:24px}
.sermons{display:flex;flex-direction:column}
.sermon{border-top:1px solid var(--line)}
.sermon:last-child{border-bottom:1px solid var(--line)}
.sermon-head{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;
  cursor:pointer;padding:22px 2px;transition:padding .2s ease}
.sermon-head:hover{padding-left:10px}
.sermon-player{max-height:0;overflow:hidden;transition:max-height .35s ease}
.sermon.open .sermon-player{max-height:220px;padding-bottom:20px}
.sermon-player iframe{width:100%;height:152px;border:0;border-radius:12px;display:block}
.sermon .meta{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--pine-deep)}
.sermon h3{font-size:24px;margin:8px 0 6px;line-height:1.15}
.sermon .ref{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--ink-faint)}
.sermon .listen{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--pine-deep);margin-top:12px;display:inline-block}
.photos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.photo{aspect-ratio:1/1;border-radius:2px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--pine-soft),#d8e4de)}
.photo .ph{position:absolute;top:10px;left:10px;font-family:var(--font-sans);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine-deep);background:rgba(255,255,255,.72);padding:3px 7px;border-radius:2px}
.photo svg{position:absolute;inset:0;margin:auto;width:32px;height:32px;color:var(--pine);opacity:.55}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.photo:hover img{transform:scale(1.05)}

/* ---------- story groups unfurl ---------- */
.unfurl{margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.unfurl summary{cursor:pointer;list-style:none;padding:18px 2px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--pine-deep)}
.unfurl summary::-webkit-details-marker{display:none}
.unfurl summary::after{content:"+";font-size:22px;line-height:1;color:var(--pine-deep)}
.unfurl[open] summary::after{content:"\2212"}
.unfurl .body{padding:2px 2px 22px}
.unfurl .body p{margin-top:14px;color:var(--ink-soft);font-size:18px}
.unfurl .body p:first-child{margin-top:0}
.unfurl .body a{color:var(--pine-deep);text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .navlinks{display:none}
  .burger{display:block}
  .welcome .grid,.split,.latest-grid{grid-template-columns:1fr;gap:38px}
  .pillars{grid-template-columns:1fr 1fr}
  .info-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;gap:32px}
}
@media(max-width:540px){
  .pillars,.team-grid{grid-template-columns:1fr}
}

/* powered-by Steeple footer credit */
.poweredby{text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.45)}
.poweredby a{font-weight:700;color:rgba(255,255,255,.72)}
.poweredby a:hover{color:#fff}

/* ---------- sermons band (film-grained video background) ---------- */
.sermons-band{position:relative;overflow:hidden;background:var(--ink)}
.sermons-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;opacity:.32}
.sermons-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,34,30,.35),rgba(28,34,30,.55))}
.sermons-band .col-label{color:#fff}
.sermons-band .sermon{border-color:rgba(255,255,255,.16)}
.sermons-band .sermon .meta{color:var(--pine-soft)}
.sermons-band .sermon h3,.sermons-band .sermon-head{color:#fff}
.sermons-band .sermon .ref{color:rgba(255,255,255,.55)}
.sermons-band .sermon .listen{color:var(--pine-soft)}
.sermons-band .sermons{max-width:760px}

/* bigger community gallery */
.photos-lg{gap:16px}
.photos-lg .photo{aspect-ratio:4/3}

/* kids section: raspberry tint + tonal cross-hatch (echoes the hero hatch) */
.kids-band{
  background-color:#f2e7ed;
  background-image:
    repeating-linear-gradient(45deg, rgba(134,90,113,.10) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(134,90,113,.10) 0 1px, transparent 1px 15px);
}