/* Inner-page header band (Devotions, Search, About Me). Images are decorative (alt=""). */
.hero{position:relative;isolation:isolate;min-height:400px;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(20,22,58,.78) 0%,rgba(20,22,58,.35) 22%,rgba(20,22,58,.45) 55%,rgba(20,22,58,.92) 88%,#14163a 100%),
 radial-gradient(ellipse 46% 52% at 50% 56%,rgba(20,22,58,.55),transparent 75%)}
.hero .site-nav{width:100%}
.hero header.site{margin:auto 0 0;padding:40px 16px 44px}
.hero header.site .title{font-size:clamp(2.4rem,6vw,4rem);text-shadow:0 2px 18px rgba(10,11,32,.85)}
.hero header.site .byline{color:#f1ead2;text-shadow:0 1px 10px rgba(10,11,32,.9)}
.hero header.site .eyebrow{color:var(--gold);text-shadow:0 1px 8px rgba(10,11,32,.9)}
.hero .site-nav a{text-shadow:0 1px 8px rgba(10,11,32,.9)}
.hero-search .hero-img{object-position:50% 60%}
.hero-dev .hero-img{object-position:40% 45%}
.hero-about .hero-img{object-position:55% 62%}
@media (max-width:600px){
 .hero{min-height:260px}
 .hero header.site{padding:24px 14px 26px}
 .hero-dev .hero-img{object-position:30% 50%}
 .hero-about .hero-img{object-position:52% 30%}
 .hero-search .hero-img{object-position:48% 50%}
 .hero::before{background:linear-gradient(180deg,rgba(20,22,58,.72) 0%,rgba(20,22,58,.2) 24%,rgba(20,22,58,.3) 50%,rgba(20,22,58,.9) 90%,#14163a 100%),
  radial-gradient(ellipse 70% 40% at 50% 62%,rgba(20,22,58,.55),transparent 80%)}
 .hero{min-height:280px}
}
@media (prefers-reduced-motion:reduce){.hero *{animation:none!important;transition:none!important}}