/* Tyler Family Outpost Ministries · About / Our ministry (private candidate, Claude 2026-09-29)
   Loaded after candidate.css, chrome.css and merged.css. The opening artwork is shown whole:
   width follows the page, height follows the image's own 1672 × 941 proportions, nothing is cropped
   and nothing is placed over it. */

.about main{background:var(--bg)}

/* ---- opening: the approved artwork, nearly full width ---- */
.ab-hero{position:relative;padding:calc(env(safe-area-inset-top,0px) + 96px) 0 0;
  background:radial-gradient(70% 60% at 50% 30%,rgba(217,182,109,.10),transparent 70%),linear-gradient(180deg,#07170F,var(--bg))}
.ab-art{position:relative;margin:0 auto;width:min(calc(100% - 32px),1640px);border-radius:22px;overflow:hidden;background:#0B2A22;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.95),0 0 0 1px rgba(233,214,160,.3),0 0 80px -30px rgba(255,200,120,.25)}
.ab-art img{display:block;width:100%;height:auto;aspect-ratio:1672/941}
.ab-intro{display:grid;justify-items:center;gap:8px;text-align:center;padding-block:clamp(26px,3.4vw,40px) clamp(40px,5vw,64px)}
.ab-intro .eyebrow{color:var(--gold)}
.ab-intro h1{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3cqi,40px);line-height:1.1;letter-spacing:-.01em;color:var(--cream)}

/* ---- sections ---- */
.ab-sec .eyebrow{display:block;margin-bottom:10px}
.ab-two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5cqi,72px);align-items:start}
.ab-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.8cqi,50px);line-height:1.05;letter-spacing:-.01em}
.lt-env .ab-head h2{color:var(--ink)}
.lt-env .ab-head h2 em{color:var(--gold-ink)}
.ab-outpost .ab-head h2,.ab-next h2{color:var(--cream)}
.ab-outpost .ab-head h2 em,.ab-next h2 em{color:var(--gold-hi)}
.ab-body{display:grid;gap:16px;align-content:start}
.ab-body p{margin:0;font-size:17px;line-height:1.7}
.lt-env .ab-body p{color:var(--ink-2)}
.ab-outpost .ab-body p{color:var(--cream-2)}
.ab-body .ab-lead{font-family:var(--serif);font-size:clamp(21px,1.9cqi,25px);line-height:1.45}
.lt-env .ab-body .ab-lead{color:var(--ink)}
.ab-outpost .ab-body .ab-lead{color:var(--cream)}
.ab-body .link{justify-self:start}
.ab-motto{font-size:13px!important;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink)!important}
.ab-outpost{position:relative;background:radial-gradient(70% 90% at 10% 20%,#17523E 0%,transparent 60%),linear-gradient(180deg,#0C3428,#07231A)}

/* ---- the three words of the banner ---- */
.ab-head-c{text-align:center;margin:0 auto clamp(26px,3.4vw,40px);max-width:820px}
.ab-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ab-pillar{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px 24px;border-radius:var(--r-lg);text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));border:1px solid rgba(201,162,84,.28);border-top:3px solid #BBA06A;
  box-shadow:inset 0 1px 0 #fff,0 24px 50px -34px rgba(16,39,31,.45);transition:transform .25s,box-shadow .25s}
.ab-pillar:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(201,162,84,.5),0 34px 60px -32px rgba(16,39,31,.5)}
.ab-pillar:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.ab-n{position:absolute;top:18px;right:22px;font-size:12px;letter-spacing:.08em;color:#8D7A55}
.ab-pillar h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2cqi,29px);line-height:1.12;color:var(--ink)}
.ab-pillar p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ab-pillar .link{margin-top:auto;padding-top:8px}

/* ---- next steps ---- */
.ab-next{background:linear-gradient(180deg,#0B2A22,var(--bg))}
.ab-next-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.ab-next h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.4cqi,44px);line-height:1.08}
.ab-next .eyebrow{color:var(--gold)}
.ab-next-acts{display:flex;flex-wrap:wrap;gap:12px}
.ab-fbot{padding-top:28px}

@container (max-width:900px){
  .ab-two{grid-template-columns:1fr}
  .ab-pillars{grid-template-columns:1fr}
}
@container (max-width:560px){
  .ab-hero{padding-top:84px}
  .ab-art{width:calc(100% - 20px);border-radius:14px}
  .ab-next-acts .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){.ab-pillar{transition:none}}

/* D036: phone clearance after the approved navigation correction. */
@media(max-width:560px){.ab-hero{padding-top:92px}}