/* Local homepage concept previews: ?concept=cinematic and ?concept=map. */

html[data-home-concept] .hero{
  min-height:104svh;
  padding-bottom:72px;
}
html[data-home-concept] .hero::after{
  content:"";
  position:absolute;
  z-index:4;
  left:-10%;
  right:-10%;
  bottom:-58px;
  height:112px;
  border-radius:50% 50% 0 0/100% 100% 0 0;
  background:#e9e1d2;
  border-top:1px solid rgba(138,106,0,.46);
  pointer-events:none;
}

.home-anniversary,
.home-map-stage{display:none}

/* Concept 1 — cinematic district story. */
html[data-home-concept="cinematic"] .hero-bg::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.72) 37%,rgba(0,0,0,.18) 76%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(11,11,12,.42),rgba(11,11,12,.12) 42%,rgba(11,11,12,.86) 92%,#0b0b0c),
    radial-gradient(60% 52% at 18% 34%,rgba(233,185,73,.16),transparent 60%);
}
html[data-home-concept="cinematic"] .hero-inner{max-width:1480px}
html[data-home-concept="cinematic"] .hero h1{max-width:12.8ch;font-size:clamp(54px,7.8vw,118px)}
html[data-home-concept="cinematic"] .hero .lede{max-width:48ch}
html[data-home-concept="cinematic"] .home-anniversary{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  margin-bottom:22px;
  color:#e9b949;
  opacity:0;
  animation:fadeUp 1.1s var(--ease) .95s forwards;
}
.home-anniversary .years{
  font:400 clamp(38px,4.5vw,66px)/.8 "Cormorant Garamond",serif;
  letter-spacing:-.04em;
}
.home-anniversary .ann-rule{width:54px;height:1px;background:rgba(233,185,73,.58)}
.home-anniversary .ann-copy{
  font:500 10px/1.6 Inter,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#cfc9be;
}

/* Concept 2 — a living map drawn from the real church directory. */
html[data-home-concept="map"] .hero{background:#090a0b}
html[data-home-concept="map"] .hero-bg{opacity:.16;filter:sepia(.3)}
html[data-home-concept="map"] .hero-bg::after{
  background:linear-gradient(90deg,#090a0b 0%,rgba(9,10,11,.9) 43%,rgba(9,10,11,.54) 75%,#090a0b 100%);
}
html[data-home-concept="map"] .hero-inner{z-index:3;width:min(45%,660px);margin-left:0;margin-right:auto}
html[data-home-concept="map"] .hero h1{font-size:clamp(46px,5.2vw,78px);max-width:11ch}
html[data-home-concept="map"] .hero .lede{max-width:42ch}
html[data-home-concept="map"] .home-map-stage{
  display:block;
  position:absolute;
  z-index:2;
  top:13%;
  right:2.5%;
  width:min(61vw,940px);
  aspect-ratio:1.65;
  pointer-events:auto;
}
.home-map-stage::before{
  content:"";
  position:absolute;
  inset:9% 5% 4%;
  background:radial-gradient(circle at 58% 48%,rgba(233,185,73,.12),transparent 54%);
  filter:blur(16px);
}
.home-map-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.home-map-outline path{
  fill:rgba(245,242,236,.025);
  stroke:rgba(233,185,73,.36);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}
.home-map-outline .county{fill:none;stroke:rgba(245,242,236,.09);stroke-width:.75}
.home-map-dots{position:absolute;inset:11% 8% 11% 8%}
.home-map-dot{
  position:absolute;
  width:8px;
  height:8px;
  border:0;
  padding:0;
  border-radius:50%;
  background:#e9b949;
  box-shadow:0 0 0 4px rgba(233,185,73,.08),0 0 22px rgba(233,185,73,.48);
  transform:translate(-50%,-50%);
  opacity:0;
  animation:mapPoint .7s var(--ease) forwards;
  cursor:pointer;
}
.home-map-dot::after{
  content:attr(data-label);
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:max-content;
  max-width:210px;
  padding:8px 10px;
  border:1px solid rgba(233,185,73,.28);
  background:rgba(9,10,11,.92);
  color:#f5f2ec;
  font:500 9px/1.35 Inter,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}
.home-map-dot:hover{z-index:5;background:#c8122c;box-shadow:0 0 0 5px rgba(200,18,44,.14),0 0 26px rgba(200,18,44,.48)}
.home-map-dot:hover::after{opacity:1}
@keyframes mapPoint{to{opacity:1}}
.home-map-legend{
  position:absolute;
  right:7%;
  bottom:2%;
  display:flex;
  align-items:baseline;
  gap:10px;
  color:#cfc9be;
  font:500 10px/1 Inter,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.home-map-legend b{font:400 40px/1 "Cormorant Garamond",serif;color:#e9b949;letter-spacing:-.04em}

/* Concept 5 — Fifty Years Forward, applied to the real mission section. */
.mission.mission-forward{/* overflow:hidden removed — it sat above the cinematic
   stage and silently killed its position:sticky pin (trap #2) */
  
  background:
    radial-gradient(80% 70% at 50% 16%,rgba(255,255,255,.45),transparent 66%),
    #e9e1d2;
  padding-top:clamp(100px,14vh,176px);
}
.mission-forward .mission-forward-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px,4vw,56px);
  align-items:stretch;
}
.mission-forward .mission-forward-head{
  text-align:center;
  justify-self:center;
  width:min(100%,920px);
}
.mission-forward .mission-forward-head .eyebrow{justify-content:center}
.mission-forward .mission-forward-head h2{
  max-width:14ch;
  margin:18px auto 20px;
  font-size:clamp(48px,7vw,96px);
  line-height:.93;
}
.mission-forward .mission-forward-head .est{margin-top:20px}
.mission-forward .mission-forward-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:clamp(390px,43vw,650px);
  border:1px solid rgba(11,11,12,.18);
  background:#0b0b0c;
  overflow:hidden;
  position:relative;
}
.mission-history,
.mission-forward .mission-visual{position:relative;min-width:0;min-height:0;overflow:hidden}
.mission-history::after,
.mission-forward .mission-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.mission-history::after{background:linear-gradient(90deg,rgba(11,11,12,.1),rgba(11,11,12,.58))}
.mission-forward .mission-visual::before{background:linear-gradient(90deg,rgba(11,11,12,.58),rgba(11,11,12,.08))}
.mission-history img,
.mission-forward .mission-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) sepia(.28) contrast(1.06) brightness(.7);
}
.mission-forward .mission-visual{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  text-align:left!important;
  aspect-ratio:auto!important;
  border:0;
  border-radius:0;
}
.mission-forward .mission-visual:hover{box-shadow:none}
.mission-history figcaption{
  position:absolute;
  z-index:3;
  left:24px;
  bottom:22px;
  color:#f5f2ec;
  font:500 10px/1.4 Inter,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.mission-forward .mission-visual.video .cap{left:24px;bottom:62px;color:#cfc9be}
.mission-forward .mission-visual .mv-tag{left:24px;bottom:22px;color:#f5f2ec}
.mission-forward .mission-decade-rail{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:start;
  color:rgba(11,11,12,.58);
  font:500 10px/1 Inter,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.mission-forward .mission-decade-rail::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:5px;
  height:1px;
  background:rgba(138,106,0,.45);
}
.mission-forward .mission-decade-rail span{position:relative;padding-top:24px;text-align:center}
.mission-forward .mission-decade-rail span::before{
  content:"";
  position:absolute;
  top:1px;
  left:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#e9e1d2;
  border:1px solid #8a6a00;
}
.mission-forward .mission-forward-copy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,76px);
  padding-top:clamp(10px,2vw,24px);
}
.mission-forward .mission-forward-copy p{max-width:none;margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.75}

@media(max-width:900px){
  html[data-home-concept="map"] .hero-inner{width:100%;max-width:620px}
  html[data-home-concept="map"] .home-map-stage{right:-26%;width:92vw;opacity:.4;pointer-events:none}
  .mission-forward .mission-forward-media{grid-template-columns:1fr;min-height:0}
  .mission-history,.mission-forward .mission-visual{aspect-ratio:16/10}
  .mission-forward .mission-forward-copy{grid-template-columns:1fr}
}
@media(max-width:620px){
  html[data-home-concept] .hero::after{bottom:-36px;height:72px}
  html[data-home-concept="cinematic"] .home-anniversary{gap:12px}
  .home-anniversary .ann-rule{width:28px}
  .home-anniversary .ann-copy{font-size:8px}
  html[data-home-concept="map"] .home-map-stage{top:25%;right:-42%;width:120vw;opacity:.28}
  .mission-forward .mission-forward-head h2{font-size:clamp(42px,14vw,66px)}
  .mission-forward .mission-decade-rail{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .mission-forward .mission-decade-rail::before{display:none}
  .mission-forward .mission-decade-rail span{padding-top:16px}
}