/* Redesign page styles. Mobile first. Built only from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-cream);color:var(--c-text);font-family:var(--ff-text);font-size:var(--fs-base);line-height:var(--lh-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-accent);text-underline-offset:3px;transition:color .15s}
a:hover{color:var(--c-ink)}
h1,h2,h3{font-family:var(--ff-display);font-weight:400;line-height:var(--lh-tight);color:var(--c-ink);margin:0 0 var(--sp-3)}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-family:var(--ff-text);font-size:var(--fs-base);font-weight:700;color:var(--c-ink);margin:0 0 var(--sp-2)}
p{margin:0 0 var(--sp-3)}
ul,ol{margin:0 0 var(--sp-3);padding-left:var(--sp-4)}
strong{color:var(--c-ink)}
@media (min-width:48rem){h1{font-size:var(--fs-3xl)}h2{font-size:var(--fs-2xl)}}

.bc-wrap{max-width:72rem;margin:0 auto;padding:0 var(--sp-3)}
.bc-narrow{max-width:44rem}
.bc-sec{padding:var(--sp-7) 0}
.bc-sec.bc-tight{padding:var(--sp-6) 0}
.bc-sand{background:var(--c-sand)}
.bc-white{background:var(--c-surface)}
.bc-ink{background:var(--c-ink);color:var(--c-sand)}
.bc-ink h1,.bc-ink h2,.bc-ink h3,.bc-ink strong{color:var(--c-surface)}
.bc-ink a{color:var(--c-surface)}
@media (min-width:48rem){.bc-sec{padding:var(--sp-8) 0}}

.bc-eyebrow{display:block;font-family:var(--ff-text);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);margin:0 0 var(--sp-2)}
.bc-lead{font-size:var(--fs-md);color:var(--c-ink)}
.bc-muted{color:var(--c-muted)}
.bc-small{font-size:var(--fs-sm)}
.bc-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0 0}
.bc-sechead{max-width:44rem;margin:0 0 var(--sp-6)}
.bc-link{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700}

/* Hero: the photo is shown whole on phones, then full bleed with a bottom scrim on wider screens */
.bc-hero{position:relative;background:var(--c-ink);color:var(--c-sand)}
.bc-hero picture,.bc-hero img{display:block;width:100%}
.bc-hero img{aspect-ratio:4/3;object-fit:cover}
.bc-hero .bc-herotext{padding:var(--sp-5) var(--sp-3) var(--sp-6)}
.bc-hero .bc-eyebrow{color:var(--c-sand)}
.bc-hero h1{color:var(--c-surface);max-width:40rem}
.bc-hero p{max-width:36rem}
.bc-times{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding:0;list-style:none}
.bc-times li{display:flex;flex-wrap:wrap;gap:0 var(--sp-2);align-items:baseline}
.bc-times strong{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-lg);color:var(--c-surface)}
@media (min-width:48rem){
  .bc-hero{min-height:86vh;display:flex;align-items:flex-end}
  .bc-hero picture{position:absolute;inset:0}
  .bc-hero img{height:100%;aspect-ratio:auto}
  .bc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--c-ink) 92%,transparent) 0%,color-mix(in srgb,var(--c-ink) 70%,transparent) 45%,transparent 85%)}
  .bc-hero .bc-herotext{position:relative;z-index:1;width:100%;max-width:72rem;margin:0 auto;padding:var(--sp-8) var(--sp-3) var(--sp-7)}
  .bc-times{grid-auto-flow:column;justify-content:start;gap:var(--sp-6)}
}
.bc-pagehero{background:var(--c-sand);padding:var(--sp-6) 0 var(--sp-5)}
.bc-pagehero p{max-width:40rem}
.bc-pagehero.bc-hasphoto{padding-bottom:0}
.bc-pagehero figure{margin:var(--sp-5) 0 0}
.bc-pagehero figure img{width:100%;aspect-ratio:16/7;object-fit:cover}
@media (max-width:47.99rem){.bc-pagehero figure img{aspect-ratio:4/3}}

/* Welcome strip */
.bc-strip{background:var(--c-sand)}
.bc-strip .bc-wrap{display:grid;gap:0}
.bc-strip section{padding:var(--sp-4) 0;border-bottom:1px solid var(--c-border)}
.bc-strip section:last-child{border-bottom:0}
.bc-strip h2{font-family:var(--ff-text);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);margin:0 0 var(--sp-1)}
.bc-strip p{margin:0}
.bc-big{font-family:var(--ff-display);font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--c-ink);margin:0 0 var(--sp-1)}
.bc-phones{list-style:none;margin:0;padding:0}
.bc-phones a,.bc-contact a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700}
@media (min-width:48rem){
  .bc-strip .bc-wrap{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
  .bc-strip section{border-bottom:0;padding:var(--sp-5) 0}
  .bc-strip section+section{border-left:1px solid var(--c-border);padding-left:var(--sp-5)}
}

/* Worship: two pastors side by side, BCC North as a quieter row */
.bc-pastors{display:grid;gap:var(--sp-4)}
.bc-pastor{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--sp-3);padding:var(--sp-5) var(--sp-4);box-shadow:var(--shadow)}
.bc-pastor header{display:flex;gap:var(--sp-3);align-items:center;margin:0 0 var(--sp-4)}
.bc-pastor header img{width:5rem;height:5rem;border-radius:var(--radius);object-fit:cover;flex:none}
.bc-pastor h3{margin:0}
.bc-pastor .bc-eyebrow{margin:0 0 var(--sp-1)}
.bc-hours{list-style:none;margin:0 0 var(--sp-4);padding:0}
.bc-hours li{display:grid;grid-template-columns:7rem 1fr;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--c-border)}
.bc-hours li:last-child{border-bottom:1px solid var(--c-border)}
.bc-hours b{color:var(--c-ink)}
.bc-contact{display:flex;flex-wrap:wrap;gap:0 var(--sp-4)}
.bc-north{margin:var(--sp-5) 0 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--c-border);display:grid;gap:var(--sp-2)}
.bc-north h3{font-size:var(--fs-md);margin:0}
.bc-north p{margin:0}
.bc-north+p{margin-top:var(--sp-4)}
@media (min-width:48rem){.bc-pastors{grid-template-columns:1fr 1fr}.bc-north{grid-template-columns:1fr auto;align-items:center}}

/* Outreach stories: alternating photo and text, no slider */
.bc-stories{display:grid;gap:var(--sp-6)}
.bc-story{display:grid;gap:var(--sp-4);align-items:center}
.bc-story figure{margin:0}
.bc-story img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sp-3)}
.bc-story h3{margin:0 0 var(--sp-2)}
@media (min-width:48rem){
  .bc-story{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  .bc-story:nth-child(even) figure{order:2}
}
.bc-more{display:grid;gap:0;list-style:none;margin:var(--sp-6) 0 0;padding:0;border-top:1px solid var(--c-border)}
.bc-more li{padding:var(--sp-3) 0;border-bottom:1px solid var(--c-border)}
.bc-more h3{font-family:var(--ff-text);font-size:var(--fs-base);font-weight:700;margin:0 0 var(--sp-1)}
.bc-more p{margin:0}
@media (min-width:48rem){.bc-more{grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}}
.bc-needs{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:var(--sp-3) 0 0;padding:0}
.bc-needs li{padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);color:var(--c-ink);font-size:var(--fs-sm)}

/* Weekly meetings */
.bc-week{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-border)}
.bc-week li{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-border)}
.bc-week b{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-md);color:var(--c-ink);line-height:var(--lh-tight)}
.bc-week>li>span{display:flex;flex-direction:column;gap:var(--sp-1)}
.bc-week .bc-lang{font-size:var(--fs-sm);color:var(--c-muted)}
.bc-week-full{margin-top:var(--sp-5)}
@media (min-width:48rem){
  .bc-week-full .bc-week,.bc-week.bc-week-row{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-3);
    border-top:0;align-items:stretch
  }
  .bc-week-full .bc-week li,.bc-week.bc-week-row li{
    display:flex;flex-direction:column;gap:var(--sp-2);
    grid-template-columns:none;padding:var(--sp-3);
    border:1px solid var(--c-border);border-radius:var(--sp-2);border-bottom:1px solid var(--c-border);
    background:var(--c-surface);min-height:100%
  }
  .bc-week-full .bc-week b,.bc-week.bc-week-row b{display:block;margin:0 0 var(--sp-1)}
}

/* Generic two column layouts */
.bc-split{display:grid;gap:var(--sp-6)}
.bc-split figure{margin:0}
.bc-split figure img{border-radius:var(--sp-3);width:100%}
@media (min-width:48rem){.bc-split{grid-template-columns:1fr 1fr;align-items:start}.bc-split.bc-center{align-items:center}}
.bc-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin:var(--sp-5) 0 0;padding:0;list-style:none}
.bc-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--sp-2)}
@media (min-width:48rem){.bc-gallery{grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}}

/* About: narrative and timeline */
.bc-prose{max-width:42rem}
.bc-prose p{margin:0 0 var(--sp-4)}
.bc-prose figure{margin:var(--sp-5) 0;max-width:24rem}
.bc-prose .bc-gallery{margin-bottom:var(--sp-4)}
.bc-prose figure img{border-radius:var(--sp-3);width:100%}
.bc-prose figcaption{font-size:var(--fs-sm);color:var(--c-muted);margin:var(--sp-2) 0 0}
.bc-quote{margin:var(--sp-5) 0;padding:0 0 0 var(--sp-4);border-left:2px solid var(--c-accent);font-family:var(--ff-display);font-size:var(--fs-md);color:var(--c-ink)}
.bc-timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--c-accent)}
.bc-timeline li{position:relative;padding:0 0 var(--sp-4) var(--sp-4)}
.bc-timeline li::before{content:"";position:absolute;left:calc(-1 * var(--sp-2) + -1px);top:var(--sp-2);width:var(--sp-3);height:var(--sp-3);border-radius:var(--radius);background:var(--c-cream);border:2px solid var(--c-accent)}
.bc-timeline b{display:block;font-family:var(--ff-display);font-weight:400;font-size:var(--fs-md);color:var(--c-ink)}
.bc-timeline span{display:block;color:var(--c-text)}

/* Giving */
.bc-ways{display:grid;gap:var(--sp-5)}
.bc-way{padding:var(--sp-4) 0 0;border-top:2px solid var(--c-accent)}
.bc-way h3{margin:0 0 var(--sp-2)}
.bc-sinpe{font-family:var(--ff-display);font-size:var(--fs-2xl);line-height:var(--lh-tight);color:var(--c-ink);margin:0 0 var(--sp-1)}
@media (min-width:48rem){.bc-ways{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-6)}}
.bc-banks{display:grid;gap:var(--sp-4)}
.bc-bank{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--sp-3);padding:var(--sp-4)}
.bc-bank h3{font-size:var(--fs-md)}
.bc-bank dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);font-variant-numeric:tabular-nums}
.bc-bank dt{color:var(--c-muted);font-size:var(--fs-sm)}
.bc-bank dd{margin:0;color:var(--c-ink);font-weight:700;overflow-wrap:anywhere}
.bc-bank p{margin:var(--sp-3) 0 0;font-size:var(--fs-sm)}
@media (min-width:48rem){.bc-banks{grid-template-columns:repeat(2,1fr)}}

/* Map and embeds */
.bc-map{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--sp-3);background:var(--c-sand);display:block}
@media (min-width:48rem){.bc-map{aspect-ratio:16/10}}

/* Details blocks for long study notes */
details.bc-details{border-top:1px solid var(--c-border);padding:var(--sp-3) 0}
details.bc-details summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--c-ink)}
details.bc-details[open] summary{margin:0 0 var(--sp-3)}
details.bc-details h2,details.bc-details h3{font-size:var(--fs-md)}
.bc-more.bc-one{margin-top:0}
@media (min-width:48rem){.bc-more.bc-one{grid-template-columns:1fr}}
.bc-pastor h2{font-size:var(--fs-lg);margin:0}

/* FAQ accordion */
.bc-faq{max-width:44rem;margin:0;padding:0;list-style:none}
.bc-faq details{border-bottom:1px solid var(--c-border);padding:var(--sp-3) 0}
.bc-faq summary{cursor:pointer;font-family:var(--ff-display);font-size:var(--fs-md);color:var(--c-ink);line-height:var(--lh-tight);list-style:none}
.bc-faq summary::-webkit-details-marker{display:none}
.bc-faq summary::after{content:"+";float:right;color:var(--c-accent);font-family:var(--ff-text);font-weight:700}
.bc-faq details[open] summary::after{content:"–"}
.bc-faq details > *:not(summary){margin-top:var(--sp-2);color:var(--c-text)}

/* Online service logos */
.bc-socials{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin:var(--sp-4) 0 0;padding:0;list-style:none}
.bc-socials a{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:var(--sp-2);border:1px solid var(--c-border);border-radius:var(--sp-2);background:var(--c-surface);text-decoration:none}
.bc-socials a:hover{border-color:var(--c-accent)}
.bc-socials img{width:auto;height:3.5rem;max-width:11rem}
.bc-socials .bc-yt{font-family:var(--ff-text);font-weight:700;font-size:var(--fs-base);color:var(--c-ink);padding:0 var(--sp-4)}