/* =========================================================
   Berean Community Hand of Faith Ltd — design system
   ========================================================= */

:root{
  --evergreen:      #173F35;
  --evergreen-dark: #102B24;
  --sage:           #4F705F;
  --ivory:          #F7F5EF;
  --ivory-dim:      #EFEBE0;
  --charcoal:       #1D2723;
  --charcoal-soft:  #4A544E;
  --gold:           #B68A4A;
  --gold-soft:      #D9C39C;
  --line:           #DAD5C6;
  --line-on-dark:   rgba(247,245,239,0.22);
  --white:          #FFFFFF;

  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w: 1220px;
  --max-w-narrow: 760px;
  --radius-sm: 3px;
  --radius: 6px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5.5rem;
  --space-7: 8rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
ul,ol{margin:0; padding:0;}
li{list-style:none;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--evergreen); color:var(--ivory);
  padding:.85rem 1.4rem; font-weight:600;
}
.skip-link:focus{left:1rem; top:1rem;}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.75rem;
}

@media (min-width:1024px){
  .container{padding:0 2.5rem;}
}

/* ---------- Typography ---------- */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--evergreen);
  line-height:1.14;
  margin:0 0 .9rem;
  letter-spacing:-0.01em;
}
h1{font-size:2.6rem;}
h2{font-size:1.9rem;}
h3{font-size:1.28rem;}
h4{font-size:1.05rem; font-family:var(--font-body); font-weight:700; color:var(--evergreen); text-transform:none;}

@media (min-width:768px){
  h1{font-size:3.4rem;}
  h2{font-size:2.35rem;}
}

p{margin:0 0 1.15rem; max-width:62ch;}
p:last-child{margin-bottom:0;}

.lead{
  font-size:1.15rem;
  color:var(--charcoal-soft);
  max-width:52ch;
}

a.inline-link{
  color:var(--evergreen);
  font-weight:600;
  border-bottom:1px solid var(--gold);
  padding-bottom:1px;
  transition:border-color .15s ease, color .15s ease;
}
a.inline-link:hover{border-color:var(--evergreen); }
.section-dark a.inline-link, .section-tint a.inline-link{color:var(--ivory); border-color:var(--gold);}

.small-caps-label{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--sage);
}
.section-dark .small-caps-label{color:var(--gold-soft);}

hr.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:.85rem 1.65rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--evergreen);
  color:var(--ivory);
  border-color:var(--evergreen);
}
.btn-primary:hover{background:var(--evergreen-dark); border-color:var(--evergreen-dark);}

.btn-outline-dark{
  background:transparent;
  color:var(--evergreen);
  border-color:var(--evergreen);
}
.btn-outline-dark:hover{background:var(--evergreen); color:var(--ivory);}

.btn-outline-light{
  background:transparent;
  color:var(--ivory);
  border-color:var(--line-on-dark);
}
.btn-outline-light:hover{background:var(--ivory); color:var(--evergreen); border-color:var(--ivory);}

.btn-gold{
  background:transparent;
  color:var(--gold);
  border-color:var(--gold);
}
.btn-gold:hover{background:var(--gold); color:var(--evergreen-dark);}

/* ---------- Header / Nav ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ivory);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--max-w);
  margin:0 auto;
  padding:1.05rem 1.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
@media (min-width:1024px){ .nav{padding:1.05rem 2.5rem;} }

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.brand-mark{width:auto; height:52px; flex-shrink:0; object-fit:contain;}
.brand-text{
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--evergreen);
  line-height:1.15;
  display:flex;
  flex-direction:column;
}
.brand-text small{
  font-family:var(--font-body);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--charcoal-soft);
  margin-top:.15rem;
}

.nav-toggle{
  display:flex;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:.5rem .6rem;
  color:var(--evergreen);
  cursor:pointer;
}

.nav-links{
  display:none;
  align-items:center;
  gap:2rem;
  font-size:.94rem;
  font-weight:600;
}
.nav-links a{
  color:var(--charcoal);
  padding:.3rem 0;
  border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--evergreen);
  border-bottom-color:var(--gold);
}
.nav-links .nav-cta{margin-left:.5rem;}
.nav-links .nav-cta a{
  border-bottom:none;
  padding:.7rem 1.4rem;
}

@media (min-width:960px){
  .nav-toggle{display:none;}
  .nav-links{display:flex;}
}
@media (max-width:959px){
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:.5rem 1.75rem 1.5rem;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%; padding:.65rem 0; border-bottom:1px solid var(--line);}
  .nav-links li:last-child{border-bottom:none; padding-top:1rem;}
  .nav-links .nav-cta a{display:inline-flex;}
}

/* ---------- Sections ---------- */

section{padding:var(--space-6) 0;}
@media (max-width:640px){ section{padding:var(--space-5) 0;} }

.section-tint{background:var(--ivory-dim);}
.section-dark{background:var(--evergreen); color:var(--ivory);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--ivory);}
.section-dark p{color:#D8DED9;}

.section-head{
  max-width:640px;
  margin-bottom:var(--space-4);
}
.section-head .small-caps-label{display:block; margin-bottom:.6rem;}

/* two-column split */
.split{
  display:grid;
  gap:var(--space-5);
}
@media (min-width:860px){
  .split{grid-template-columns:1.1fr 0.9fr; align-items:start;}
  .split.split-reverse{grid-template-columns:0.9fr 1.1fr;}
  .split.split-even{grid-template-columns:1fr 1fr;}
}

/* ---------- Hero (home) ---------- */

.hero{
  padding:var(--space-6) 0 var(--space-6);
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  gap:var(--space-5);
  align-items:end;
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.3fr 0.9fr;}
}
.hero-eyebrow{
  font-size:.85rem;
  font-weight:700;
  color:var(--sage);
  margin-bottom:1.1rem;
  letter-spacing:.01em;
}
.hero h1{max-width:15ch;}
.hero-actions{
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-top:2rem;
}

/* registration snapshot card in hero */
.register-card{
  border:1px solid var(--line);
  background:var(--white);
  padding:var(--space-4);
  border-radius:var(--radius);
}
.register-card .register-kicker{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--evergreen);
  margin-bottom:1.1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.register-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
}
.register-row:last-child{border-bottom:none; padding-bottom:0;}
.register-row dt{color:var(--charcoal-soft); font-weight:500;}
.register-row dd{margin:0; font-weight:700; color:var(--evergreen); text-align:right;}

/* ---------- Page hero (interior pages) ---------- */

.page-hero{
  background:var(--evergreen);
  color:var(--ivory);
  padding:var(--space-5) 0 var(--space-6);
}
.breadcrumb{
  font-size:.85rem;
  font-weight:700;
  color:var(--gold-soft);
  margin-bottom:1rem;
}
.page-hero h1{color:var(--ivory); max-width:20ch;}
.page-hero .lead{color:#D8DED9;}

/* ---------- Notice / "not yet published" panel ---------- */

.notice{
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  background:var(--white);
  padding:var(--space-4);
  border-radius:var(--radius-sm);
}
.section-tint .notice{background:var(--ivory);}
.notice h3{margin-bottom:.6rem;}
.notice p{color:var(--charcoal-soft);}
.notice p:last-child{margin-top:.9rem;}

.notice-flag{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  border:1px solid var(--gold-soft);
  background:#FBF6EC;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
}
.notice-flag svg{flex-shrink:0; margin-top:.2rem; color:var(--gold);}
.notice-flag p{margin-bottom:0; color:var(--charcoal);}
.notice-flag strong{color:var(--evergreen);}

/* ---------- Registration ledger (About) ---------- */

.ledger{
  border:1px solid var(--charcoal);
  background:var(--white);
  margin-top:var(--space-3);
}
.ledger-title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1.3rem 1.6rem;
  border-bottom:1px solid var(--charcoal);
}
.ledger-title span{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--sage);
}
.ledger-row{
  display:grid;
  grid-template-columns:1fr;
  border-bottom:1px solid var(--line);
}
.ledger-row:last-child{border-bottom:none;}
.ledger-row dt{
  padding:1rem 1.6rem .2rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--charcoal-soft);
  margin:0;
}
.ledger-row dd{
  padding:0 1.6rem 1rem;
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--evergreen);
}
@media (min-width:640px){
  .ledger-row{grid-template-columns:280px 1fr; align-items:center;}
  .ledger-row dt{padding:1.1rem 1.6rem;}
  .ledger-row dd{padding:1.1rem 1.6rem;}
}

/* ---------- Status legend (Projects) ---------- */

.status-legend{
  display:grid;
  gap:0;
  margin-top:var(--space-3);
  border-top:1px solid var(--line);
}
.status-legend > div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.3rem;
  padding:1.6rem 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.status-dot{
  width:.65rem; height:.65rem;
  border-radius:50%;
  background:var(--gold);
  margin-top:.45rem;
}
.status-legend h4{margin-bottom:.3rem;}
.status-legend p{margin-bottom:0; color:var(--charcoal-soft);}

/* ---------- Steps (How to apply) ---------- */

.steps{
  counter-reset:step;
  margin-top:var(--space-3);
}
.steps > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.6rem;
  padding:var(--space-3) 0;
  border-top:1px solid var(--line);
}
.steps > li:last-child{border-bottom:1px solid var(--line);}
.steps > li::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--gold);
  line-height:1;
}
.steps h3{margin-bottom:.35rem;}
.steps p{color:var(--charcoal-soft); margin-bottom:0;}

/* ---------- Gallery empty frames ---------- */

.frame-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
  margin-bottom:var(--space-4);
}
@media (min-width:640px){
  .frame-grid{grid-template-columns:repeat(4, 1fr);}
}
.frame{
  border:1px solid var(--line);
  background:repeating-linear-gradient(135deg, var(--ivory-dim), var(--ivory-dim) 8px, var(--ivory) 8px, var(--ivory) 16px);
}
.frame.tall{aspect-ratio:3/4;}
.frame.wide{aspect-ratio:4/3;}
.frame.square{aspect-ratio:1/1;}

/* ---------- Photo gallery ---------- */

.photo-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.85rem;
  margin-bottom:var(--space-4);
}
@media (min-width:640px){
  .photo-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (min-width:960px){
  .photo-grid{grid-template-columns:repeat(4, 1fr);}
}
.photo-item{
  display:block;
  padding:0;
  margin:0;
  border:1px solid var(--line);
  background:var(--ivory-dim);
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:pointer;
  border-radius:4px;
}
.photo-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.photo-item:hover img{transform:scale(1.05);}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(20,16,12,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:2rem;
}
.lightbox img{
  max-width:100%;
  max-height:90vh;
  border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;
  top:1.25rem;
  right:1.5rem;
  background:none;
  border:none;
  color:var(--ivory);
  font-size:2.5rem;
  line-height:1;
  cursor:pointer;
}

/* ---------- CTA band ---------- */

.cta-band{
  background:var(--charcoal);
  color:var(--ivory);
}
.cta-band-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.75rem;
  padding:var(--space-5) 1.75rem;
}
.cta-band h2{color:var(--ivory); margin-bottom:.4rem;}
.cta-band p{color:#C9CFC9; margin-bottom:0;}

/* ---------- Form ---------- */

.form-note{
  font-size:.88rem;
  color:var(--charcoal-soft);
  margin-bottom:var(--space-3);
}
.form-field{margin-bottom:1.3rem;}
.form-field label{
  display:block;
  font-size:.86rem;
  font-weight:700;
  color:var(--evergreen);
  margin-bottom:.4rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  padding:.75rem .9rem;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:var(--radius-sm);
  color:var(--charcoal);
}
.form-field textarea{min-height:140px; resize:vertical;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--evergreen);
  box-shadow:0 0 0 3px rgba(23,63,53,0.12);
}

/* ---------- Map placeholder ---------- */

.map-block{
  border:1px solid var(--line);
  background:var(--ivory-dim);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-3);
}
.map-block-inner{
  text-align:center;
  color:var(--charcoal-soft);
  font-size:.9rem;
  max-width:26ch;
}
.map-block svg{margin:0 auto .7rem; color:var(--sage);}

/* ---------- Footer ---------- */

.site-footer{
  background:var(--evergreen-dark);
  color:#C9D2CC;
  padding-top:var(--space-5);
}
.footer-grid{
  display:grid;
  gap:var(--space-4);
  padding-bottom:var(--space-4);
  border-bottom:1px solid rgba(247,245,239,0.14);
}
@media (min-width:760px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
}
.footer-grid h4{
  font-family:var(--font-display);
  color:var(--ivory);
  font-size:1.05rem;
  margin-bottom:.9rem;
}
.footer-grid p{color:#AEBBB2; font-size:.92rem;}
.footer-grid ul li{margin-bottom:.55rem;}
.footer-grid ul a{color:#C9D2CC; font-size:.92rem;}
.footer-grid ul a:hover{color:var(--gold-soft);}
.footer-legal{font-size:.86rem; color:#9CAAA1;}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.6rem;
  padding:1.6rem 1.75rem;
  font-size:.82rem;
  color:#8A988F;
}
.footer-bottom p{margin:0;}

/* ---------- Utility ---------- */

.mt-0{margin-top:0;}
.text-center{text-align:center;}
.max-narrow{max-width:var(--max-w-narrow);}