/* =====================================================================
   VESPERS — About page ("The heart behind the sanctuary")
   A distinctive, editorial, deeply personal layout. Inherits :root tokens.
   ===================================================================== */
.about{--ab-gap:clamp(48px,7vw,104px);}

/* ---------------------------------------------------------------------
   Hero — founder portrait in an arch, on a midnight band w/ candle glow
   --------------------------------------------------------------------- */
.ab-hero{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(112px,15vw,160px); padding-bottom:clamp(44px,6vw,84px);}
.ab-hero-glow{position:absolute; inset:0; z-index:0; background:
  radial-gradient(46% 50% at 78% 30%, rgba(226,203,148,.22), transparent 62%),
  radial-gradient(60% 60% at 12% 80%, rgba(53,59,110,.5), transparent 64%);}
.ab-hero .hero-arch{bottom:-30%; left:78%;}
.ab-hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,60px); align-items:center;}
.ab-hero-copy{max-width:54ch;}
.ab-hero .eyebrow{margin-bottom:14px;}
.ab-hero h1{color:var(--on-dark-1); font-size:clamp(2.7rem,6.4vw,4.8rem); line-height:1; margin:0; letter-spacing:-.02em;}
.ab-hero-role{display:inline-flex; align-items:center; gap:10px; margin-top:16px; font:700 .72rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--gilt-300);}
.ab-hero-role .ln{width:30px; height:1px; background:var(--hairline-gold);}
.ab-hero .lead{color:var(--on-dark-2); margin-top:18px; max-width:46ch;}
.ab-hero .verse{margin-top:22px; padding-left:18px; border-left:2px solid var(--hairline-gold);}
.ab-hero .verse p{font:italic 500 1.12rem/1.5 var(--font-display); color:var(--gilt-100);}
.ab-hero .verse .cite{margin-top:8px;}
/* portrait */
.ab-portrait{position:relative; justify-self:center; width:min(420px,82vw);}
.ab-portrait .ph{display:block; width:100%; aspect-ratio:4/5; border-radius:46% 46% 12px 12px / 30% 30% 12px 12px; box-shadow:var(--shadow-xl);}
.ab-portrait .ph::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1.5px var(--hairline-gold); pointer-events:none; z-index:3;}
.ab-portrait-frame{position:absolute; inset:-14px; border:1.5px solid rgba(226,203,148,.32); border-radius:48% 48% 16px 16px / 32% 32% 16px 16px; pointer-events:none;}
.ab-portrait-sig{position:absolute; right:-8px; bottom:18px; z-index:4; display:flex; align-items:center; gap:9px; background:var(--parchment-50); color:var(--ink-900);
  padding:11px 16px; border-radius:999px; box-shadow:var(--shadow-lg); font:600 .82rem/1 var(--font-display);}
.ab-portrait-sig vm-icon{color:var(--gilt-700);}
@media (min-width:880px){ .ab-hero-inner{grid-template-columns:1.08fr .92fr;} .ab-portrait{justify-self:end;} }

/* ---------------------------------------------------------------------
   Creed band — Rooted · Healed · Bold · Transformed (arch medallions)
   --------------------------------------------------------------------- */
.ab-creed{background:var(--surface-warm); border-bottom:1px solid var(--border-soft);}
.ab-creed-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,30px); text-align:center;}
.ab-creed-item{display:flex; flex-direction:column; align-items:center; gap:10px;}
.ab-creed-med{width:62px; height:70px; display:flex; align-items:center; justify-content:center; color:var(--gilt-700);
  border:1.5px solid var(--hairline-gold); background:var(--gilt-100); border-radius:50% 50% 14px 14px / 60% 60% 14px 14px;}
.ab-creed-item b{font:600 1.3rem/1 var(--font-display); color:var(--fg1);}
.ab-creed-item span{font:400 .86rem/1.5 var(--font-body); color:var(--fg2); max-width:24ch;}
@media (min-width:760px){ .ab-creed-grid{grid-template-columns:repeat(4,1fr);} }

/* ---------------------------------------------------------------------
   The calling — drop-cap narrative + arch-masked reel still
   --------------------------------------------------------------------- */
.ab-story{background:var(--parchment-50);}
.ab-story-grid{display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,60px); align-items:center;}
.ab-story-copy .kicker{margin-top:10px;}
.ab-story-prose{margin-top:18px;}
.ab-story-prose p{font:400 1.075rem/1.8 var(--font-body); color:var(--fg1); margin-top:18px; max-width:60ch;}
.ab-story-prose p:first-of-type::first-letter{float:left; font:600 4.2em/.72 var(--font-display); color:var(--accent-strong); padding:8px 14px 0 0;}
.ab-story-prose em{font-style:italic; color:var(--accent-strong);}
.ab-story-media{position:relative;}
.ab-story-media .ph{display:block; width:100%; aspect-ratio:4/5; border-radius:46% 46% 12px 12px / 30% 30% 12px 12px; box-shadow:var(--shadow-lg);}
.ab-story-media .ph::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hairline-gold); z-index:3; pointer-events:none;}
.ab-story-media .ab-story-badge{position:absolute; left:-10px; top:22px; z-index:4; background:var(--ink-900); color:var(--on-dark-1);
  padding:10px 15px; border-radius:14px; box-shadow:var(--shadow-md); font:600 .8rem/1.3 var(--font-body); max-width:13rem;}
.ab-story-media .ab-story-badge b{color:var(--gilt-300); display:block; font:700 .64rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px;}
@media (min-width:880px){ .ab-story-grid{grid-template-columns:1.15fr .85fr;} .ab-story:nth-of-type(odd) .ab-story-media{order:-1;} }

/* ---------------------------------------------------------------------
   The heart of the work — value cards
   --------------------------------------------------------------------- */
.ab-heart{background:var(--surface-warm);}
.ab-heart-head{max-width:60ch;}
.ab-heart-head .kicker{margin-top:10px;}
.ab-heart-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:clamp(26px,3vw,38px);}
.ab-heart-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; padding:clamp(22px,2.6vw,28px); box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.ab-heart-card .med{width:48px; height:54px; display:flex; align-items:center; justify-content:center; color:var(--gilt-700);
  border:1.5px solid var(--hairline-gold); background:var(--gilt-100); border-radius:50% 50% 12px 12px / 60% 60% 12px 12px; margin-bottom:15px;}
.ab-heart-card h3{font-size:1.4rem; line-height:1.12;}
.ab-heart-card p{margin-top:9px; font:400 .94rem/1.62 var(--font-body); color:var(--fg2);}
@media (hover:hover){ .ab-heart-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);} }
@media (min-width:680px){ .ab-heart-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1020px){ .ab-heart-grid{grid-template-columns:repeat(4,1fr);} }

/* ---------------------------------------------------------------------
   The journey — numbered editorial index (began / today / vision)
   --------------------------------------------------------------------- */
.ab-journey{position:relative; overflow:hidden; color:var(--on-dark-1); background:var(--ink-900);}
.ab-journey-glow{position:absolute; inset:0; z-index:0; background:radial-gradient(50% 50% at 84% 16%, rgba(226,203,148,.16), transparent 60%);}
.ab-journey-inner{position:relative; z-index:2;}
.ab-journey-head{max-width:60ch;}
.ab-journey-head .kicker{color:var(--on-dark-1); margin-top:10px;}
.ab-journey-head .kicker em{color:var(--gilt-300);}
.ab-journey-list{margin-top:clamp(28px,4vw,42px); border-top:1px solid var(--border-on-dark);}
.ab-step{display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,34px); padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--border-on-dark); align-items:start;}
.ab-step-n{font:600 1.5rem/1 var(--font-display); color:var(--gilt-300); letter-spacing:.02em;}
.ab-step h3{color:var(--on-dark-1); font-size:clamp(1.35rem,2.2vw,1.8rem); line-height:1.12;}
.ab-step p{font:400 1rem/1.7 var(--font-body); color:var(--on-dark-2); margin-top:8px; max-width:62ch;}
.ab-step .when{display:inline-block; margin-top:10px; font:700 .66rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gilt-300);}
@media (min-width:760px){ .ab-step{grid-template-columns:120px 1fr;} }

/* ---------------------------------------------------------------------
   Closing — scripture + invitation
   --------------------------------------------------------------------- */
.ab-invite{background:var(--parchment-50);}
.ab-invite-inner{text-align:center; max-width:54ch; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:14px;}
.ab-invite-mark{color:var(--gilt-700);}
.ab-invite .scripture{color:var(--fg1); letter-spacing:-.01em;}
.ab-invite .scripture::before{content:""; display:block; width:34px; height:1px; background:var(--hairline-gold); margin:0 auto 16px;}
.ab-invite .cite{color:var(--accent-strong);}
.ab-invite-note{font:400 1.02rem/1.7 var(--font-body); color:var(--fg2); margin-top:4px;}
.ab-invite-cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:10px;}

@media (prefers-reduced-motion:reduce){
  .about *{scroll-behavior:auto;}
}