/* Sermonable shared stylesheet for content pages (the homepage keeps its own inline CSS). */
:root{
  --paper:#faf7f0; --paper-deep:#f3ede0; --card:#fffdf6; --ink:#26221a; --ink-soft:#5c5648;
  --olive:#41603c; --olive-deep:#324a2e; --gold:#b3872f; --gold-text:#8a6520; --line:#e4dcc9;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(1200px 520px at 50% -120px,#fffdf6,var(--paper)) fixed,var(--paper);
     color:var(--ink);font-family:var(--serif);line-height:1.65;overflow-x:hidden}
::selection{background:rgba(179,135,47,.28)}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
a{color:var(--olive)}
[id]{scroll-margin-top:80px}

header.site{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
       background:rgba(250,247,240,.88);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;max-width:1020px;margin:0 auto;
     padding-left:24px;padding-right:24px}
.mark{display:flex;align-items:center;gap:9px;font-size:1.35rem;letter-spacing:.01em;text-decoration:none}
.mark .logo{width:30px;height:30px;flex:none}
.mark b{font-weight:700;color:var(--olive)}
.mark .pause{color:var(--gold);font-weight:700}
.btn{display:inline-block;background:var(--olive);color:#fff;text-decoration:none;border:none;
     font-family:var(--sans);font-size:.95rem;font-weight:600;padding:.65rem 1.15rem;border-radius:.5rem;
     cursor:pointer;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{background:var(--olive-deep);transform:translateY(-1px);box-shadow:0 6px 18px rgba(50,74,46,.22)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--olive);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--olive);border:1px solid var(--olive)}
.btn.ghost:hover{background:rgba(65,96,60,.07);box-shadow:none}
.btn:disabled{opacity:.75;cursor:default;transform:none;box-shadow:none}

/* Page hero and prose */
.pageHero{padding:52px 0 8px;text-align:center}
.crumb{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);margin-bottom:14px}
.crumb a{color:var(--gold-text);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.eyebrow{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
         color:var(--gold-text);margin-bottom:12px}
h1{font-size:clamp(1.8rem,4.6vw,2.6rem);line-height:1.18;font-weight:600;max-width:22ch;margin:0 auto 14px;
   text-wrap:balance}
h1 em{font-style:italic;color:var(--olive)}
.lede{max-width:56ch;margin:0 auto;color:var(--ink-soft);font-size:1.08rem}
.meta{font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);margin-top:16px}
.meta span+span::before{content:"·";margin:0 .5rem;color:var(--gold)}

main{display:block;padding-bottom:24px}
article.prose{padding:34px 0 8px}
.prose h2{font-size:1.35rem;font-weight:600;margin:34px 0 10px}
.prose h3{font-size:1.08rem;font-weight:600;margin:24px 0 8px}
.prose p{margin:0 0 1em;color:var(--ink)}
.prose p.soft,.prose li{color:var(--ink-soft)}
.prose ul,.prose ol{margin:0 0 1.2em 1.3em}
.prose li{margin-bottom:.4em}
.prose .updated{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin-bottom:26px}
.sermonText{white-space:pre-wrap;font-size:1.08rem;line-height:1.8}
mark.scripture{background:linear-gradient(transparent 58%, rgba(179,135,47,.32) 58%);
               color:inherit;font-weight:600;padding:0 .06em}
.rchurch{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-style:italic;
         color:var(--ink-soft);text-align:center;font-size:.95rem}

/* CTA box */
.ctaBox{background:var(--paper-deep);border:1px solid var(--line);border-radius:14px;padding:26px;
        text-align:center;margin:40px 0}
.ctaBox h2{font-size:1.25rem;margin-bottom:8px}
.ctaBox p{color:var(--ink-soft);margin-bottom:16px;font-size:.98rem}

/* Verse blocks */
.verse{margin:0 0 28px}
.vkick{font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
       color:var(--gold-text);margin-bottom:7px}
.vtext{border-left:3px solid var(--gold);padding:2px 0 2px 18px;font-size:1.08rem;line-height:1.75;margin:0}
.vtext cite{display:block;font-family:var(--sans);font-style:normal;font-size:.84rem;
            color:var(--ink-soft);margin-top:8px}

/* Topic cards */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:26px 0}
.tcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
       text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.tcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(38,34,26,.09)}
.tcard b{display:block;font-size:1.02rem;margin-bottom:3px}
.tcard span{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.related{margin:34px 0}
.related h2{font-size:1.1rem;margin-bottom:4px}

/* Forms */
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;
             text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;
  padding:.68rem .9rem;border:1px solid var(--line);border-radius:.5rem;background:#fff;color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.formNote{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);margin-top:10px}

footer.site{border-top:1px solid var(--line);padding:34px 0 44px;text-align:center;
       font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);margin-top:40px}
footer.site .creed{font-family:var(--serif);font-style:italic;font-size:1rem;margin-bottom:12px;color:var(--ink)}
.fnav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-bottom:12px}
.fnav a{color:var(--ink-soft);text-decoration:none}
.fnav a:hover{color:var(--olive);text-decoration:underline}

@media (max-width:640px){
  .pageHero{padding:36px 0 6px}
  .nav{padding-top:11px;padding-bottom:11px}
  .mark{font-size:1.2rem}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{
  header.site,footer.site,.ctaBox,.related,.crumb,.btn{display:none!important}
  body{background:#fff;color:#000}
  .wrap{max-width:100%;padding:0}
  mark.scripture{background:none;font-weight:700;text-decoration:underline}
}