/* Shared site styles for all pages */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--parchment-50); color: var(--text-primary); font: var(--text-md); scroll-behavior: smooth; }
a { color: var(--oxblood-700); text-decoration: none; }
a:hover { color: var(--oxblood-500); }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--oxblood-600); }

/* Topbar */
.topbar { background: var(--ink-900); color: var(--text-on-dark-muted); font: var(--text-xs); letter-spacing: 0.04em; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; padding: 10px var(--gutter); }
.topbar a { color: var(--text-on-dark-muted); }
.topbar a:hover { color: var(--parchment-100); }
.topbar .meta { display:flex; gap: 24px; }
.topbar .services { color: var(--gold-500); }

/* Nav */
header.nav { position: sticky; top: 0; z-index: 20; background: rgba(253, 250, 243, 0.94); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border-parchment); }
header.nav .inner { display:flex; align-items:center; justify-content:space-between; padding: 18px var(--gutter); max-width: var(--container); margin: 0 auto; }
.brand { display:flex; align-items:center; gap: 14px; color: var(--ink-800); }
.brand .mark { width: 40px; height: 40px; color: var(--oxblood-600); }
.brand .word { display:flex; flex-direction:column; line-height: 1; }
.brand .word .name { font: 500 1.375rem/1 var(--font-serif); letter-spacing: 0.01em; color: var(--ink-800); }
.brand .word .sub { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; }
nav ul { display:flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items:center; }
nav a { color: var(--ink-700); font: 500 0.9375rem/1 var(--font-sans); padding: 8px 2px; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
nav a:hover, nav a.active { color: var(--oxblood-600); border-color: var(--oxblood-600); }
.nav-cta { background: var(--oxblood-600); color: #fff !important; padding: 10px 18px !important; border-radius: var(--radius-sm); border: none !important; }
.nav-cta:hover { background: var(--oxblood-500); color: #fff !important; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap: 10px; font: 600 0.9375rem/1 var(--font-sans); letter-spacing: 0.04em; padding: 15px 24px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: all .15s ease; }
.btn-primary { background: var(--oxblood-600); color: #fff; }
.btn-primary:hover { background: var(--oxblood-500); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink-800); border-color: var(--ink-800); }
.btn-secondary:hover { background: var(--ink-800); color: var(--parchment-100); }
.btn-ghost { color: var(--ink-800); padding: 0; background: transparent; border-bottom: 1px solid var(--ink-800); border-radius: 0; padding-bottom: 3px; }
.btn-ghost:hover { color: var(--oxblood-600); border-color: var(--oxblood-600); }

/* Page header / hero (inner pages) */
.page-hero { position: relative; padding: var(--sp-8) 0 var(--sp-7); background: var(--parchment-100); border-bottom: 1px solid var(--border-parchment); overflow: hidden; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .crumb { font: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.page-hero .crumb a { color: var(--text-muted); }
.page-hero h1 { font: var(--display-xl); color: var(--ink-900); margin: 0 0 18px; letter-spacing: -0.01em; max-width: 18ch; }
.page-hero h1 em { font-style: italic; color: var(--oxblood-700); font-weight: 500; }
.page-hero .lede { font: var(--text-xl); color: var(--ink-600); max-width: 54ch; margin: 0; }

/* Prose */
.prose { font: var(--text-lg); color: var(--ink-700); }
.prose p { margin: 0 0 20px; }
.prose h2 { font: var(--display-md); color: var(--ink-900); margin: 48px 0 16px; letter-spacing: -0.01em; }
.prose h3 { font: 500 1.375rem/1.3 var(--font-serif); color: var(--ink-800); margin: 32px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink-800); }

/* Scripture block */
.scripture-block { border-left: 2px solid var(--oxblood-600); padding: 10px 0 10px 28px; margin: 32px 0; }
.scripture-block q { font: var(--scripture-md); color: var(--ink-700); display:block; quotes: "\201C" "\201D"; }
.scripture-block .cite { font: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; display:block; }

/* Footer */
footer { background: var(--ink-900); color: var(--text-on-dark-muted); padding: var(--sp-8) 0 var(--sp-5); }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.foot-brand { color: var(--parchment-100); }
.foot-brand .mark { width: 48px; height: 48px; color: var(--gold-500); margin-bottom: 18px; }
.foot-brand .name { font: 500 1.5rem/1.1 var(--font-serif); color: var(--parchment-100); }
.foot-brand .tag { font: var(--text-sm); color: var(--text-on-dark-muted); margin-top: 12px; max-width: 36ch; }
.foot-col h4 { font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-500); margin: 6px 0 18px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a { color: var(--parchment-100); font: var(--text-sm); }
.foot-col a:hover { color: var(--gold-500); }
.foot-bottom { border-top: 1px solid rgba(247, 241, 228, 0.12); margin-top: 48px; padding-top: 24px; display:flex; justify-content:space-between; font: var(--text-xs); color: var(--text-on-dark-muted); letter-spacing: 0.04em; }
.social { display:flex; gap: 10px; }
.social a { width: 36px; height: 36px; border: 1px solid rgba(247, 241, 228, 0.2); border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; color: var(--parchment-100); }
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }

/* Responsive */
@media (max-width: 980px) {
  nav ul { display: none; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: 1fr; }
}