@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #262446;
  background: #f7f6fb;
}
* { box-sizing: border-box; }
body { margin: 0; }
.masthead { background: #23204d; color: #fff; border-bottom: 3px solid #c8a265; }
.brand, main { max-width: 68rem; margin: auto; padding: 1.5rem; }
.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { border-radius: 14px; box-shadow: 0 0 0 1px #e0c18c; }
.brand span { color: #e9c992; font-size: .85rem; }
h1, h2, h3 { margin: 0; }
h1 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(1.65rem, 5vw, 2.5rem); }
.card { background: white; border: 1px solid #e4dfef; border-radius: 18px; padding: clamp(1rem, 4vw, 2rem); margin-bottom: 1rem; }
.login { max-width: 29rem; margin: clamp(1rem, 7vw, 4rem) auto 0; }
.login p { color: #625d78; }
label { display: block; margin: .9rem 0; font-weight: 600; }
input, select, button { font: inherit; min-height: 44px; border-radius: 9px; }
input, select { display: block; width: 100%; border: 1px solid #aaa2bb; padding: .65rem; margin-top: .35rem; background: white; color: inherit; }
button { cursor: pointer; padding: .6rem 1rem; color: white; background: #3b3268; border: 1px solid #3b3268; font-weight: 600; }
button:disabled { opacity: .65; cursor: wait; }
button.secondary { background: white; color: #3b3268; }
:focus-visible { outline: 3px solid #9a651f; outline-offset: 3px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0 1rem; }
ul { list-style: none; margin: 0; padding: 0; }
li { padding: .75rem 0; border-bottom: 1px solid #ebe7f0; overflow-wrap: anywhere; }
li:last-child { border-bottom: 0; }
#status:empty { display: none; }

.welcome { background: linear-gradient(135deg, #fff, #f1ebfb); padding: clamp(1.5rem, 6vw, 4rem); }
.welcome h2 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(2rem, 7vw, 4rem); }
.welcome p { max-width: 38rem; line-height: 1.6; }
.button { display: inline-flex; align-items: center; min-height: 44px; border-radius: 9px; padding: .65rem 1rem; color: white; background: #3b3268; text-decoration: none; font-weight: 600; }
.card p { line-height: 1.6; }
.church-links { gap: .75rem; margin-top: 1rem; }
.check { display: flex; align-items: center; gap: .65rem; }
.check input { width: 1.2rem; min-height: 1.2rem; margin: 0; }
.pastoral-photo { display: block; width: min(100%, 38rem); height: auto; border-radius: 14px; }

.site-nav, .section-nav, .site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.site-nav, .site-footer { max-width: 68rem; margin: auto; padding: 0 1.5rem 1rem; }
.site-nav a, .section-nav a, .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav a { color: #fff; padding: 0 .55rem; text-decoration: none; }
.site-nav a[aria-current] { color: #ffe0a8; text-decoration: underline; text-underline-offset: .35em; }
.section-nav { margin-bottom: 1rem; }
.site-footer { justify-content: space-between; border-top: 1px solid #e4dfef; padding-top: .75rem; }
.location { display: grid; gap: .5rem; color: #292443; text-decoration: none; }
.location strong { font-weight: 800; letter-spacing: -.035em; font-size: 1.5rem; }
.location span { color: #554980; }
.profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: center; gap: 1.5rem; }
.contact { overflow-wrap: anywhere; }
.skip-link { position: absolute; left: 1rem; top: -10rem; background: white; padding: .75rem; z-index: 2; }
.skip-link:focus { top: 1rem; }
audio { display: block; width: 100%; max-width: 32rem; }