/* Shared ASJUMC styles. Layout: Relume section stack — banner, sticky nav, photo hero, alternating cream/white bands, navy CTA, slate footer. */
:root {
  --navy: #334E68; --deep: #182939; --cream: #F9FCF3; --ink: #2E3236; --red: #C8102E; --slate: #373B4D;
  --display: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Adobe Garamond Pro", adobe-garamond-pro, "EB Garamond", Garamond, Georgia, serif;
  color-scheme: light;
}
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body { background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: #fff; }
h1, h2, h4 { font-family: var(--display); }
h3, h5, h6 { font-family: var(--body); }
.btn, nav a { font-family: var(--display); }
h1, h2, h4, h6 { text-wrap: balance; }
/* Relume uses px-[5%]; keep that rhythm but never below a 16px / safe-area gutter. */
.gutter { padding-left: max(16px, 5%, env(safe-area-inset-left, 0px)); padding-right: max(16px, 5%, env(safe-area-inset-right, 0px)); }
nav a { white-space: nowrap; }
.tagline { font-family: var(--body); font-style: italic; font-weight: 500; letter-spacing: 0.01em; }
.btn { font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.flame-rule { width: 3rem; height: 3px; background: var(--red); border-radius: 2px; }
.prayer-input { width: 100%; border: 1px solid #D5DDD0; border-radius: 0.875rem; background: #fff; padding: 0.75rem 1rem; color: var(--ink); font-size: 1.0625rem; transition: border-color .2s, box-shadow .2s; }
.prayer-input::placeholder { color: #8A9199; }
.prayer-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(51, 78, 104, .18); }
.prayer-input[aria-invalid="true"] { border-color: var(--red); }
.prayer-chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid #D5DDD0; border-radius: 999px; font-family: var(--body); font-size: 0.9375rem; font-weight: 600; color: var(--deep); background: #fff; transition: background .2s, color .2s, border-color .2s; }
.peer:checked + .prayer-chip { background: var(--navy); border-color: var(--navy); color: #fff; }
.peer:focus-visible + .prayer-chip { outline: 3px solid var(--red); outline-offset: 2px; }
#mobile-menu { transition: max-height .35s ease; }
.hero-image { animation: heroFade 1.4s ease both; }
@keyframes heroFade { from { transform: scale(1.04); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-image { animation: none; } #mobile-menu { transition: none; } }