/* ==========================================================================
   About page only (about.html) — load after styles.css and inner.css
   ========================================================================== */

/* At-a-glance numbers */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 70px}
.stat{position:relative;text-align:center;padding:6px 20px}
.stat+.stat::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,rgba(232,185,96,.6),transparent)}
.stat b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;background:linear-gradient(180deg,#fff2c9,#e8b960);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* History: text column + sticky milestones */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,5vw,70px);align-items:start}
.history h2{margin-bottom:26px}
.history p{margin:0 0 1.3em}
.history>p:first-of-type::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:4.6em;line-height:.8;padding:.06em .1em 0 0;color:var(--gold)}
.points p{border-left:2px solid var(--gold);padding-left:20px}

.aside{position:sticky;top:130px}
.aside .panel{max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(232,185,96,.5) transparent}
.aside h3{margin:0 0 22px;font-size:1.5rem}
.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:1px solid rgba(232,185,96,.45)}
.timeline li{position:relative;padding-bottom:24px;font-size:.95rem;font-weight:300;line-height:1.55}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-29px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent)}
.timeline time{display:block;margin-bottom:2px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* Previous pastors */
.pastors-wrap{margin-top:90px}
.pastors-wrap .eyebrow{margin-bottom:12px}
.pastors{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pastors li{position:relative;padding:20px 22px 20px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.pastors li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:linear-gradient(var(--gold),transparent)}
.pastors li:hover{transform:translateY(-4px);border-color:rgba(232,185,96,.55)}
.pastors .yrs{display:block;font-family:var(--serif);font-weight:700;font-size:1.7rem;line-height:1.1;color:var(--gold)}
.pastors .nm{display:block;margin-top:6px;font-weight:300;font-size:1.02rem}
.pastors .role{font-size:.8rem;color:var(--mute)}
.pastors li.now{border-color:rgba(232,185,96,.6);background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--gold) 14%,var(--card)))}
.pastors .badge{position:absolute;right:16px;bottom:16px;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#10143a;background:#e8b960;padding:4px 10px;border-radius:99px}

@media(max-width:900px){.about-grid{grid-template-columns:1fr}.aside{position:static;margin-top:20px}}
@media(max-width:600px){.stats{grid-template-columns:1fr;gap:34px}.stat+.stat::before{left:20%;right:20%;top:-17px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(232,185,96,.6),transparent)}}