/* Shared site chrome: header, main menu, skip link and focus styles.
   Used by every page so the menu behaves the same everywhere. */
:root{--sj-ink:#1E1B18;--sj-cream:#FAF6EF;--sj-line:#E6DAC4;--sj-burgundy:#7A1F2B;--sj-burgundy-dk:#5A1520;--sj-gold:#C9A24A}
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.skip-link{position:absolute;left:12px;top:-120px;z-index:100;background:var(--sj-ink);color:#fff !important;padding:12px 18px;border-radius:10px;font:600 15px/1.2 Inter,system-ui,sans-serif;text-decoration:none}
.skip-link:focus{top:12px}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sj-gold);outline-offset:3px;border-radius:6px}

.site-header{position:sticky;top:0;z-index:50;background:var(--sj-cream);border-bottom:1px solid var(--sj-line);font-family:Inter,system-ui,sans-serif}
.site-header__bar{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.site-brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.site-brand img{height:46px;width:auto;display:block}

.site-nav{display:flex;align-items:center;gap:4px 6px;font-size:15px;font-weight:500}
.site-nav a{color:var(--sj-ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px}
.site-nav a:hover{color:var(--sj-burgundy)}
.site-nav a[aria-current="page"]{color:var(--sj-burgundy);font-weight:600;box-shadow:inset 0 -2px 0 var(--sj-burgundy);border-radius:0}
.site-nav .site-nav__cta{background:var(--sj-burgundy);color:#fff;padding:0 22px;border-radius:999px;margin-left:8px;font-weight:600}
.site-nav .site-nav__cta:hover{background:var(--sj-burgundy-dk);color:#fff}

/* Grouped menu items: dropdowns on desktop, labelled sections on mobile */
.nav-group{position:relative}
.nav-group__label{display:none}
.nav-group__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--sj-ink);font:inherit;cursor:pointer}
.nav-group__btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.nav-group__btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-group__btn:hover,.nav-group__btn[aria-expanded="true"]{color:var(--sj-burgundy)}
.nav-group__btn.is-current{color:var(--sj-burgundy);font-weight:600;box-shadow:inset 0 -2px 0 var(--sj-burgundy);border-radius:0}
.nav-group__panel{display:none;position:absolute;left:0;top:100%;min-width:230px;padding:8px;margin-top:6px;background:var(--sj-cream);border:1px solid var(--sj-line);border-radius:14px;box-shadow:0 18px 30px -16px rgba(30,27,24,.35);flex-direction:column;gap:2px;z-index:60}
.nav-group__panel.is-open{display:flex}
.nav-group__panel a{white-space:nowrap}
.nav-group__panel a:hover{background:#fff}
.nav-group__panel a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--sj-burgundy);border-radius:8px;padding-left:14px}
/* No script: show every link inline, no dropdown buttons */
html:not(.js) .nav-group__btn,html:not(.js) .nav-group__label{display:none}
html:not(.js) .nav-group,html:not(.js) .nav-group__panel{display:contents;position:static}

.nav-toggle{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 14px;border:1.5px solid var(--sj-ink);border-radius:999px;background:transparent;color:var(--sj-ink);font:600 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
.nav-toggle__icon,.nav-toggle__icon::before,.nav-toggle__icon::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle__icon{position:relative}
.nav-toggle__icon::before,.nav-toggle__icon::after{content:"";position:absolute;left:0}
.nav-toggle__icon::before{top:-6px}.nav-toggle__icon::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{transform:translateY(-6px) rotate(-45deg)}

/* Phones and tablets (below 1024px): the menu collapses behind a button.
   Only when the script has run (html.js), so the links stay visible without it. */
@media (max-width:1023px){
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;background:var(--sj-cream);border-bottom:1px solid var(--sj-line);box-shadow:0 18px 30px -18px rgba(30,27,24,.35);font-size:17px;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto}
  .js .site-nav.is-open{display:flex}
  .js .site-nav a{min-height:52px;padding:0 4px;border-bottom:1px solid var(--sj-line);border-radius:0}
  .js .site-nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--sj-burgundy);padding-left:14px}
  .js .site-nav .site-nav__cta{margin:16px 0 0;justify-content:center;border-bottom:0;border-radius:999px}
  .js .nav-group{padding:6px 0 4px;border-bottom:1px solid var(--sj-line)}
  .js .nav-group__btn{display:none}
  .js .nav-group__label{display:block;padding:8px 4px 2px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sj-burgundy)}
  .js .nav-group__panel{display:flex;position:static;min-width:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
  .js .nav-group__panel a{white-space:normal;padding-left:14px}
  .js .nav-group__panel a:hover{background:transparent}
  .js .nav-group__panel a:last-child{border-bottom:0}
  .js .nav-group__panel a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--sj-burgundy);border-radius:0}
  html:not(.js) .site-header__bar{flex-wrap:wrap}
  html:not(.js) .site-nav{flex-wrap:wrap}
}
@media (max-width:420px){
  .site-header__bar{padding:10px 16px}
  .site-brand img{height:40px}
  .js .site-nav{padding-left:16px;padding-right:16px}
}
@media print{.site-header{position:static}.nav-toggle,.skip-link{display:none}}

/* Touch targets and small-screen fixes shared by all pages */
.tap,.foot-links a,footer.site .links a{display:inline-flex;align-items:center;min-height:44px}
.ev a{display:inline-block;padding:12px 0;margin:-12px 0}
.skip-link{min-height:44px;display:inline-flex;align-items:center}
/* 16px inputs stop iPhones zooming in when a field is tapped */
input,select,textarea{font-size:16px !important}
@media (max-width:600px){
  .util-bar a{overflow-wrap:anywhere}
  .util-bar span:last-child{display:none !important}
}
img{max-width:100%;height:auto}
@media print{
  .util-bar,footer,[data-share],[data-print],form,.toc,.pager{display:none !important}
  body{background:#fff !important}
}
@media (max-width:480px){
  .form-pair{grid-template-columns:1fr !important}
  .visit-form{padding:22px !important}
}

/* Home page: upcoming services */
.up-grid{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.up-card{background:#fff;border:1px solid var(--sj-line);border-radius:20px;padding:28px}
.up-card h3.up-head{margin:0 0 18px;font:500 26px/1.2 Jost,'Century Gothic','Avenir Next',sans-serif}
.up-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.up-item{display:flex;gap:16px;align-items:flex-start}
.up-badge{flex:0 0 auto;width:60px;height:64px;border-radius:12px;background:#8A6A24;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.up-badge span:first-child{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.up-badge span:last-child{font:500 24px/1.1 Jost,sans-serif}
.up-item h3{margin:0;font-size:18px;font-weight:600;line-height:1.35}
.up-item p{margin:4px 0 0;font-size:15px;color:#5C5248}
.up-item .up-fallback{margin:0;font-size:16px;color:#3E3731}

/* Home page: hero carousel (slides written by tools/media.py build, behaviour in assets/hero.js).
   Desktop: photos fill the band and the words sit on a soft dark wash on the left.
   Phones: the photo sits on top and the words follow below it on cream, so text never covers faces. */
.hero{position:relative;background:#1E1B18}
.hero__media{position:absolute;inset:0;overflow:hidden;background:#2A2420}
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.hero__slide.is-active{opacity:1;visibility:visible;transition:opacity 1.2s ease}
html:not(.js) .hero__slide:first-child{opacity:1;visibility:visible}
.hero__slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,16,13,.82) 0%,rgba(20,16,13,.6) 34%,rgba(20,16,13,.12) 64%,rgba(20,16,13,0) 80%),linear-gradient(0deg,rgba(20,16,13,.45) 0%,rgba(20,16,13,0) 26%)}
.hero__content{position:relative;z-index:2;pointer-events:none;min-height:clamp(460px,74vh,720px);display:flex}
.hero__in{max-width:1200px;width:100%;margin:0 auto;padding:48px 24px;box-sizing:border-box;display:flex;align-items:center}
.hero__text{max-width:720px;pointer-events:auto;color:#FAF6EF}
.hero__kicker{margin:0 0 18px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#F3D98E}
.hero__title span{display:block}
@media (min-width:761px){.hero__title span{white-space:nowrap}}
.hero__title{margin:0;font:400 clamp(40px,4.4vw,64px)/1.04 Jost,'Century Gothic','Avenir Next',sans-serif;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero__lede{margin:20px 0 0;font-size:19px;color:#F1E9DC;max-width:540px}
.hero__ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.hero__btn{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:14px 28px;border-radius:999px;font-weight:600;text-decoration:none}
.hero__btn--main{background:#7A1F2B;color:#fff !important}
.hero__btn--main:hover{background:#5A1520}
.hero__btn--alt{border:1.5px solid #FAF6EF;color:#FAF6EF !important}
.hero__btn--alt:hover{background:rgba(250,246,239,.12)}
.hero__rule{margin-top:28px;display:flex;align-items:center;gap:14px;color:#C9A24A}.hero__rule span{flex:1;height:0;border-top:1px solid currentColor}.hero__rule svg{flex:none}.hero__rule+.hero__sunday{margin-top:16px}.hero__sunday{margin-top:28px;display:inline-block;background:rgba(250,246,239,.96);color:#1E1B18;border-radius:16px;padding:16px 22px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:100%;box-sizing:border-box}
.hero__sunday p{margin:0}
.hero__sunday .k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#2F5D62}
.hero__sunday .t{margin-top:4px;font:500 24px/1.2 Jost,'Century Gothic','Avenir Next',sans-serif}
.hero__sunday .s{margin-top:4px;font-size:14px;color:#5C5248}
.hero__controls{position:absolute;right:max(16px,calc((100% - 1200px)/2 + 24px));bottom:20px;z-index:3;display:none;align-items:center;gap:8px}
.hero--ready .hero__controls{display:flex}
.hero__ctl{width:44px;height:44px;border:0;border-radius:999px;background:rgba(20,16,13,.6);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hero__ctl:hover{background:rgba(20,16,13,.85)}
.hero__ctl svg{width:18px;height:18px;fill:currentColor}
.hero__ctl .i-play{display:none}
.hero__ctl.is-paused .i-play{display:block}
.hero__ctl.is-paused .i-pause{display:none}
.hero__count{min-width:52px;text-align:center;color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hero__slide,.hero__slide.is-active{transition:none}}
@media (max-width:760px){
  .hero{background:var(--sj-cream)}
  .hero__media{position:relative;inset:auto;height:auto;aspect-ratio:16/10}
  .hero__media::after{background:linear-gradient(0deg,rgba(20,16,13,.5) 0%,rgba(20,16,13,0) 34%)}
  .hero__content{position:static;min-height:0;display:block}
  .hero__in{padding:24px 20px 44px;display:block}
  .hero__text{display:flex;flex-direction:column;align-items:flex-start}
  .hero__kicker{margin-bottom:12px}
  .hero__sunday{order:1;margin-top:20px !important;width:100%}
  .hero__ctas{order:2;margin-top:20px}
  .hero__rule{display:none}
  .hero__text{color:#1E1B18}
  .hero__kicker{color:#7A1F2B}
  .hero__title{color:#1E1B18;text-shadow:none;font-size:clamp(38px,11vw,52px)}
  .hero__lede{color:#3E3731;font-size:17px}
  .hero__btn--alt{border-color:#1E1B18;color:#1E1B18 !important}
  .hero__btn--alt:hover{background:rgba(30,27,24,.06)}
  .hero__sunday{background:#fff;border:1px solid var(--sj-line);box-shadow:none}
  .hero__controls{right:12px;bottom:12px;gap:6px}
}

/* Home page: the church year band (assets/season.js swaps the image and words by season) */
.season-band{background:#F2EADB}
.season-band__in{max-width:1200px;margin:0 auto;padding:88px 24px;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
/* The whole picture always shows: an icon of Christ is never cropped (Michael, 12 Nov 2026). */
.season-band__fig{flex:1 1 360px;min-width:0;max-width:520px;margin:0;display:flex;justify-content:center;align-items:center}
.season-band__fig img{display:block;width:auto;max-width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:20px;box-shadow:0 18px 40px -20px rgba(30,27,24,.45)}
.season-band__text{flex:1 1 420px;min-width:0}
.season-band__kicker{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7A1F2B}
.season-band__title{margin:0;font:400 44px/1.1 Jost,'Century Gothic','Avenir Next',sans-serif}
.season-band__note{margin:22px 0 0;font-size:18px;color:#3E3731}
.season-band__next{margin:14px 0 0;font-size:16px;color:#5C5248}
.season-band__links{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.season-band__btn{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:13px 26px;border-radius:999px;background:#7A1F2B;color:#fff !important;text-decoration:none;font-weight:600}
.season-band__btn:hover{background:#5A1520}
@media (max-width:600px){.season-band__in{padding:64px 20px;gap:32px}.season-band__title{font-size:34px}}

/* Community services and groups (home page and calendar page) */
.cg-grid{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.cg-card{background:#fff;border:1px solid var(--sj-line);border-radius:20px;padding:26px}
.cg-card h3,.cg-card h4{margin:0 0 14px;font:500 24px/1.2 Jost,'Century Gothic','Avenir Next',sans-serif}
.cg-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.cg-card li{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--sj-line)}
.cg-card li:first-child{padding-top:0;border-top:0}
.cg-name{font-weight:600;font-size:17px}
.cg-name a{color:inherit}
.cg-note{font-weight:400;color:#5C5248;font-size:15px}
.cg-when{font-size:15px;color:#7A1F2B;font-weight:500}
.cg-desc{font-size:15px;color:#5C5248}

/* Inner pages (visit, about, families, give): intro and shared building blocks */
.page-intro{max-width:1248px;margin:0 auto;padding:48px 24px 8px;box-sizing:border-box}
.page-intro__crumbs{margin:0;font-size:14px;color:#5C5248}
.page-intro__crumbs a{color:#5C5248}
.page-intro h1{margin:10px 0 0;font:400 clamp(38px,5vw,56px)/1.08 Jost,'Century Gothic','Avenir Next',sans-serif}
.page-intro__lede{margin:14px 0 0;font-size:19px;color:#3E3731;max-width:680px}
.sj-eyebrow{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7A1F2B}
.sj-title{margin:0;font:400 clamp(32px,4vw,44px)/1.1 Jost,'Century Gothic','Avenir Next',sans-serif}
.sj-title--sm{font-size:clamp(26px,3vw,32px)}
.sj-btn{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:13px 26px;border-radius:999px;font-weight:600;text-decoration:none}
.sj-btn--main{background:#7A1F2B;color:#fff !important}.sj-btn--main:hover{background:#5A1520}
.sj-btn--alt{border:1.5px solid #1E1B18;color:#1E1B18 !important}.sj-btn--alt:hover{background:rgba(30,27,24,.06)}
.sj-btn--gold{background:#C9A24A;color:#1E1B18 !important}.sj-btn--gold:hover{background:#B8913C}
.sj-card{background:#fff;border:1px solid #E6DAC4;border-radius:20px;padding:28px;min-width:0}
.sj-card p{margin:12px 0 0}
.sj-card--dark{background:#1E1B18;border-color:#1E1B18;color:#FAF6EF}
.sj-card__more{font-weight:600}
.visit-grid,.give-page{align-items:start;max-width:1248px;margin:0 auto;padding:40px 24px 8px;box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.give-page{padding-bottom:88px}
.times{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid #E6DAC4}
.times li{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid #E6DAC4}
.times span{flex:0 0 80px;font-weight:600;color:#7A1F2B}
.map{margin-top:16px;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#E6DAC4}
.map iframe{width:100%;height:100%;border:0;display:block}
.app-links a{display:inline-block;padding:10px 0;font-weight:600}
.profile{max-width:1248px;margin:0 auto;padding:88px 24px;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.profile__photo{flex:1 1 320px;max-width:420px;border-radius:200px 200px 20px 20px;overflow:hidden}
.profile__photo img{width:100% !important;height:auto !important;display:block;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%}
.profile__text{flex:1 1 420px;min-width:0}
.profile__text p{margin:16px 0 0;font-size:18px;color:#3E3731}
.profile__contact{display:flex;flex-wrap:wrap;gap:12px}
.note-band{max-width:1248px;margin:0 auto 88px;padding:0 24px;box-sizing:border-box}
.note-band p{margin:0;padding:20px 24px;border-left:4px solid #C9A24A;background:#fff;border-radius:0 14px 14px 0;color:#3E3731}
.foot-tap{display:inline-block;padding:11px 0}
.foot-links a{display:inline-block;padding:11px 0}
/* Scripture and Church Fathers quote bands (generated by tools/quotes.py) */
.qband{padding:72px 24px;text-align:center;color:#1E1B18}
.qband--plain{padding:0 24px}
.qband--pt{padding-top:88px}
.qband--pb{padding-bottom:88px}
.qband--cream{background:#F2EADB}
.qband--dark{background:#7A1F2B;color:#FAF6EF}
.qband__fig{max-width:820px;margin:0 auto}
.qband__mark{display:block;width:26px;height:26px;margin:0 auto 22px;color:#C9A24A}
.qband__eyebrow{margin:0 0 14px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#F3D98E}
.qband__text{margin:0}
.qband__text p{margin:0;font-family:Jost,'Century Gothic','Avenir Next',sans-serif;font-weight:300;font-size:clamp(24px,3.3vw,34px);line-height:1.35;text-wrap:balance}
.qband--long .qband__text p{font-size:clamp(21px,2.6vw,27px);line-height:1.45}
.qband__cite{margin-top:20px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7A1F2B}
.qband--dark .qband__cite{color:#F3D98E}
.qband__src{display:block;margin-top:4px;font-weight:400;letter-spacing:.02em;text-transform:none;font-size:14px;color:#5C5248}
.qband--dark .qband__src{color:#E8DECF}
.sc{font-variant:small-caps;letter-spacing:.02em}
@media (max-width:640px){.qband{padding:56px 20px}.qband--plain{padding:0 20px}.qband--pt{padding-top:64px}.qband--pb{padding-bottom:64px}}
.foot-credit{flex-basis:100%;margin:4px 0 0;font-size:12px;color:#9C9080}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;opacity:0}
.form-status{margin:0;font-size:15px;color:#2F5D62;font-weight:500;outline:none}
.form-status:empty{display:none}
.visit-form.is-sent .form-note{display:none}
.visit-form.is-sent > label,.visit-form.is-sent > .form-pair{display:none}