/* MyChurchWeb: an open door at dusk. Deep indigo for the evening, lamp gold for the light coming through the door,
   warm white paper for reading. Castoro Titling for names and headings, Hanken Grotesk for everything else. */
:root { --night:#1E2148; --night-2:#2A2E5E; --gold:#F2B84B; --gold-d:#A8730F; --paper:#FBF8F2; --white:#FFFFFF; --ink:#1B1B24; --soft:#585A68; --line:#E8E2D6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:500 18px/1.65 'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
h1, h2, .ct { font-family:'Castoro Titling',Georgia,serif; font-weight:400; letter-spacing:.01em; line-height:1.08; }
h3 { font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:-.01em; }
.wrap { max-width:1240px; margin:0 auto; padding:0 24px; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 12px; z-index:10; }
.skip:focus { left:8px; }
.site-head { background:rgba(251,248,242,.94); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5; border-bottom:1px solid var(--line); }
.site-head .wrap { display:flex; align-items:center; gap:28px; height:72px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:400 22px/1 'Castoro Titling',serif; letter-spacing:.02em; }
.brand .door { width:38px; height:38px; }
.site-head nav { display:flex; gap:22px; margin-left:auto; font-size:15px; font-weight:600; }
.site-head nav a { text-decoration:none; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.site-head nav a:hover { color:var(--ink); }
.site-head nav a[aria-current] { color:var(--ink); border-color:var(--gold); }
.btn { display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:13px 22px; border-radius:999px; background:var(--night); color:#fff; border:2px solid var(--night); cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--night-2); border-color:var(--night-2); }
.btn.gold { background:var(--gold); color:var(--night); border-color:var(--gold); }
.btn.ghost { background:transparent; color:inherit; border-color:currentColor; }
.intro { padding:70px 0 50px; }
.intro h1 { font-size:clamp(36px,4.8vw,66px); margin:0 0 18px; max-width:16em; color:var(--night); }
.intro p { font-size:20px; color:var(--soft); max-width:36em; margin:0; }
.sec { padding:90px 0; }
.sec h2 { font-size:clamp(30px,3.6vw,50px); margin:0 0 16px; color:var(--night); }
.lede { font-size:19px; color:var(--soft); max-width:40em; margin:0 0 40px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; }
.card h3 { font-size:20px; margin:0 0 6px; } .card p { margin:0; color:var(--soft); }
.photo { border-radius:18px; overflow:hidden; margin:0; position:relative; }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo figcaption { position:absolute; left:14px; bottom:12px; background:rgba(30,33,72,.78); color:#fff; font-size:13px; font-weight:700; padding:4px 12px; border-radius:999px; }
.band { background:var(--night); color:#fff; border-radius:24px; padding:56px; display:grid; grid-template-columns:1.3fr auto; gap:30px; align-items:center; position:relative; overflow:hidden; }
.band::after { content:''; position:absolute; right:-60px; bottom:-120px; width:280px; height:380px; border-radius:140px 140px 0 0; background:radial-gradient(ellipse at 50% 70%, rgba(242,184,75,.35), rgba(242,184,75,0) 70%); pointer-events:none; }
.band h2 { color:#fff; margin:0 0 10px; } .band p { margin:0; color:#C9CBE4; max-width:36em; }
.band .btn { background:var(--gold); color:var(--night); border-color:var(--gold); position:relative; z-index:1; }
.site-foot { background:var(--night); color:#B9BCDA; padding:60px 0 40px; font-size:15px; }
.site-foot .brand { color:#fff; }
.site-foot .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.site-foot h4 { color:#fff; font-size:15px; margin:0 0 12px; }
.site-foot ul { list-style:none; margin:0; padding:0; } .site-foot li { margin:6px 0; }
.site-foot a { text-decoration:none; } .site-foot a:hover { color:#fff; }
.site-foot .legal { border-top:1px solid #34386E; margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; }
.site-foot .legal a { text-decoration:underline; }
@media (max-width:980px) {
  .grid2, .band { grid-template-columns:1fr; } .grid3 { grid-template-columns:1fr 1fr; } .band { padding:34px 24px; }
  .site-foot .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) { .grid3 { grid-template-columns:1fr; } .sec { padding:64px 0; } .site-foot .cols { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* header menu: the Contact and phone links live in the phone menu; on desktop the gold button does that job */
.site-head .nav-contact, .site-head .nav-phone { display:none; }
.site-head .head-cta { padding:10px 18px; }
.menu-toggle { display:none; margin-left:auto; width:46px; height:46px; border:2px solid var(--night); border-radius:12px; background:#fff; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.menu-toggle span { display:block; width:20px; height:2px; background:var(--night); border-radius:2px; transition:transform .2s, opacity .2s; }
.menu-toggle[aria-expanded=true] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded=true] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1120px) {
  .menu-toggle { display:flex; }
  .site-head nav { display:none; position:absolute; top:72px; left:0; right:0; background:var(--paper); flex-direction:column; gap:0; padding:6px 24px 20px; border-bottom:1px solid var(--line); box-shadow:0 20px 30px -20px rgba(30,33,72,.35); font-size:18px; }
  .site-head nav.open { display:flex; }
  .site-head nav a { padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); }
  .site-head nav a[aria-current] { border-color:var(--line); box-shadow:inset 4px 0 0 var(--gold); padding-left:12px; }
  .site-head .nav-contact, .site-head .nav-phone { display:block; }
  .site-head .nav-phone { border-bottom:0; font-weight:800; color:var(--night); }
  .site-head .head-cta { display:none; }
}
@media (max-width:420px) { .brand { font-size:19px; } .brand .door { width:32px; height:32px; } }

.eyebrow { font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-d); margin:0 0 12px; }
.prose { max-width:760px; }
.prose h1 { font-size:clamp(34px,4.4vw,56px); color:var(--night); margin:0 0 18px; }
.prose h2 { font-size:clamp(24px,2.6vw,32px); color:var(--night); margin:44px 0 12px; }
.prose h3 { font-size:20px; margin:28px 0 8px; }
.prose p, .prose li { color:#33343F; }
.prose li { margin:6px 0; }
.prose a { color:var(--night); text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px; }
.note { background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:12px; padding:16px 20px; color:var(--soft); }

/* tables: scroll inside their box with scripts off; with scripts on, phones get one card per row */
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff; }
.tbl { width:100%; border-collapse:collapse; font-size:16px; }
.tbl th, .tbl td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl thead th { background:#F4F0E7; font-size:14px; color:var(--night); white-space:nowrap; }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl td small { display:block; color:var(--soft); font-size:13px; }
.tbl .us td { background:#FFF7E6; }
@media (max-width:760px) {
  .tbl.stack thead { display:none; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display:block; width:100%; }
  .tbl.stack tr { border-bottom:1px solid var(--line); padding:10px 0; }
  .tbl.stack td { border:0; padding:4px 16px; }
  .tbl.stack td:first-child { font-weight:800; color:var(--night); font-size:17px; }
  .tbl.stack td:not(:first-child)::before { content:attr(data-label) ": "; font-weight:700; color:var(--soft); }
  .tbl.stack td[data-label=""]::before { content:none; }
}

/* questions and answers */
.faq details { border-top:1px solid var(--line); padding:4px 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-weight:700; font-size:18px; padding:16px 36px 16px 0; list-style:none; position:relative; color:var(--night); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:4px; top:12px; font-size:26px; color:var(--gold-d); font-weight:500; }
.faq details[open] summary::after { content:'\2212'; }
.faq details p { margin:0 0 18px; color:var(--soft); max-width:46em; }

.foot-about p { margin:14px 0 0; max-width:30em; }
.foot-contact { display:flex; flex-direction:column; gap:4px; }
.foot-contact a { color:#fff; font-weight:700; }
.site-foot .cols { grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; }
@media (max-width:980px) { .site-foot .cols { grid-template-columns:1fr 1fr; } .foot-about { grid-column:1 / -1; } }
@media (max-width:620px) { .site-foot .cols { grid-template-columns:1fr 1fr; } }
.page-cta { padding-top:30px; padding-bottom:90px; }
@media (max-width:620px) { .wrap { padding:0 16px; } .band { padding:30px 20px; } .intro { padding:48px 0 34px; } .intro p { font-size:18px; } }