:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;font-size:clamp(16px,.45vw + 11px,24px);color:#f4dfcc;background:#d0834d}*{box-sizing:border-box;min-width:0}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(.5rem,1.6vw,2rem);gap:clamp(.4rem,1.2vh,1rem)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,summary{touch-action:manipulation}button,summary{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffc477;outline-offset:-3px}h1,p{margin:0}.verse{text-align:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(1rem,2.2vw,2.2rem);line-height:1.15;color:#30170d;text-shadow:0 1px 8px #f8d6b0}.verse small{display:block;font-size:.65em;margin-top:.2rem}.site{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(17rem,1fr);height:100%;min-height:0;box-shadow:0 0 40px #40160a40;background:#40160a;overflow:hidden}.picture-panel{position:relative;min-height:0;background:#261109;overflow:hidden}.chapel{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.menu-panel{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;background:#40160a}.brand{padding:clamp(.6rem,1.5vw,1.6rem);text-align:center;border:1px solid transparent;background:#40160a}.brand h1{font-size:clamp(1rem,1.4vw,1.65rem);line-height:1.2;color:#c58877;font-weight:600}.brand h1 span{color:#f2ded2}.brand p{font-family:Georgia,serif;font-style:italic;font-size:.8rem;margin-top:.35rem}.resources{min-height:0;overflow-y:scroll;scrollbar-gutter:stable;overflow-x:hidden;overscroll-behavior:contain;scrollbar-color:#b47a58 #40160a;scrollbar-width:thin}.resource,summary{display:block;padding:.8rem 1rem;min-height:48px;border-top:1px solid #714434;border-bottom:1px solid #200000;overflow-wrap:anywhere;font-size:1rem;line-height:1.35}.resource:hover,summary:hover{background:#200000}.resource-group{margin:0}.resource-group[open]>summary{background:#200000}.resource-children{background:#60362a;padding-left:.6rem}.resource-children .resource-children{background:#80564a}.resource-children .resource-children .resource-children{background:#a0766a}.resource-children .resource{font-size:.9rem}.resource-children summary{font-size:.95rem}summary::marker{color:#dfac87}footer{color:#29170f;text-align:center;font-size:clamp(.75rem,1.2vw,1.25rem);line-height:1.35;overflow-wrap:anywhere;text-shadow:0 1px 6px #ffdfbd}#content-panel{position:absolute;inset:0;background:#40160a;color:#40160a;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}.content-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem .9rem;background:#40160a;color:#f4dfcc}.content-bar h1{font-size:1rem;font-weight:400;overflow-wrap:anywhere}.content-bar button{width:44px;min-width:44px;height:44px;font-size:1.5rem;background:transparent;border:1px solid #93634a;color:inherit}#content-body{background:#f5ead8;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:grid;align-content:stretch}#content-body iframe{border:0;display:block;width:100%;height:100%;min-height:0;background:#f5ead8}#content-body iframe.video{background:rgb(64,22,10)}#content-body img{width:100%;height:100%;object-fit:contain;min-height:0}#content-body audio{width:calc(100% - 2rem);margin:auto 1rem}#contact-form{display:grid;align-content:start;gap:1rem;padding:1.25rem}label{display:grid;gap:.4rem;font-size:.9rem}input,textarea{width:100%;padding:.7rem;color:#40160a;background:#fff9f0;border:1px solid #b78a69;border-radius:2px}textarea{resize:vertical}.form-actions{display:flex;gap:1rem}.form-actions button{padding:.7rem 1.5rem;min-height:44px;border:1px solid #86583d;background:#40160a;color:#f4dfcc}.honeypot{position:absolute;left:-10000px}[hidden]{display:none!important}.article-page{display:block;height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden;padding:clamp(1rem,3vw,2.5rem);background:#f5ead8;color:#40160a;font-size:1rem;line-height:1.7}.article-page main{max-width:75ch;margin:auto;overflow-wrap:anywhere}.article-page p{margin:1rem 0}.article-page table{width:100%;table-layout:fixed}.article-page td,.article-page th{overflow-wrap:anywhere}.article-page h1,.article-page h2,.article-page h3{font-family:Georgia,serif}.menu-access-page{display:block;background:#f5ead8;color:#40160a;padding:1rem;overflow-y:auto}.menu-access-card{max-width:30rem;margin:auto}.menu-access-card form{display:grid;gap:1rem;margin-top:1rem}.menu-access-card button{min-height:44px;background:#40160a;color:#f5ead8;border:0;padding:.75rem}@media(max-width:700px){body{padding:.35rem;gap:.35rem}.verse{font-size:clamp(.85rem,3.7vw,1.25rem)}.brand{padding:.5rem}.brand h1{font-size:1rem}.brand h1 br{display:none}.brand h1 span::before{content:' '}.brand p{font-size:.7rem}.resource,summary{padding:.65rem .8rem}.content-bar{padding:.2rem .6rem}footer{font-size:.7rem}#contact-form{padding:.75rem;gap:.7rem}}@media(max-height:450px) and (min-width:500px){.site{grid-template-columns:minmax(0,1.3fr) minmax(15rem,1fr);grid-template-rows:minmax(0,1fr)}.verse{font-size:.85rem}.verse br{display:none}.verse small{display:inline;margin-left:.5rem}.brand{padding:.4rem}footer{font-size:.65rem}}

html.article-document{height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden}.article-document .menu-access-page{height:auto;min-height:100%}

@media(orientation:portrait){.site{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,3fr) minmax(0,2fr)}}

/* Original alignments, with space for the glow around the viewport-bound box. */
body{padding:clamp(.75rem,2.2vw,3rem);gap:clamp(.6rem,1.4vh,1.3rem)}
.verse{text-align:right}
.site{padding:0;gap:clamp(.3rem,.55vw,.65rem);border:0;border-radius:1.1rem;box-shadow:0 0 25px #ffe8cf80,0 0 65px #fff1dd55,0 12px 30px #40160a35}
.picture-panel,.menu-panel{border-radius:.65rem;overflow:hidden;clip-path:inset(0 round .65rem)}
.picture-panel:has(#content-panel:not([hidden])){background:#40160a}
.picture-panel:has(#content-panel:not([hidden])) .chapel{visibility:hidden}
.brand h1 span{display:block;text-align:right}.brand p{text-align:right}
footer{font-size:clamp(.9rem,1.5vw,1.5rem)}
#notice{width:min(90vw,52rem);max-height:90dvh;padding:clamp(.6rem,1.5vw,1.25rem);border:1px solid #c39975;border-radius:.6rem;background:#fff8ec;overflow-y:auto;overflow-x:hidden;box-shadow:0 0 45px #ffe4c150}
#notice::backdrop{background:#180c08b3}
#notice img{display:block;width:100%;height:auto;max-height:calc(90dvh - 6rem);object-fit:contain}
#notice form{display:flex;justify-content:center;margin-top:1rem}
#notice button{min-height:44px;padding:.65rem 1.6rem;border:0;border-radius:.25rem;background:#40160a;color:#fff4e4;font-size:1rem}
@media(max-width:700px){body{padding:.65rem;gap:.5rem}.brand h1 br{display:initial}.brand h1 span::before{content:none}footer{font-size:.85rem}}
@media(max-height:450px){body{padding:.5rem;gap:.35rem}footer{font-size:.8rem}}

/* Logo and verse share the top row; all church header text aligns right. */
.masthead{display:grid;grid-template-columns:clamp(4rem,18vw,8rem) minmax(0,1fr);align-items:center;gap:clamp(.5rem,1.5vw,1.5rem)}
.site-logo{display:block;width:100%;height:auto;padding:clamp(.35rem,.8vw,.65rem);background:#fff;border-radius:.65rem}
.brand,.brand h1,.brand h1 span,.brand p{text-align:right}
@media(max-width:700px){.masthead .verse{font-size:clamp(.75rem,3vw,1.25rem)}}

/* Keep landscape menus bounded and resource rows independent of viewport scaling. */
@media(orientation:landscape){.site{grid-template-columns:minmax(0,1fr) min(38.46%,475px)}}
.resources .resource,.resources summary{font-size:16px;line-height:1.35;padding:12px 16px;min-height:48px}
.resources .resource-children .resource{font-size:14.4px}
.resources .resource-children summary{font-size:15.2px}
@media(max-width:700px){.resources .resource,.resources summary{padding:10px 13px}}

/* Fill the verse row with the logo and balance its outer vertical spacing. */
body{row-gap:clamp(.75rem,2.2vw,3rem)}
.masthead{position:relative;display:block;padding-left:clamp(5rem,24vw,13rem)}
.site-logo{position:absolute;top:0;left:0;width:auto;height:100%;max-width:30%;object-fit:contain}
@media(max-width:700px){body{row-gap:.65rem}}
@media(max-height:450px){body{row-gap:.5rem}}

/* Give the verse a defined area beside the logo, then fit its type to that area. */
.masthead{padding-left:max(112px,clamp(5rem,24vw,13rem));height:clamp(72px,11dvh,140px);min-height:0;display:flex;align-items:center;justify-content:flex-end}
.masthead .verse{width:100%;font-size:clamp(14px,2.6vw,40px);line-height:1.15;overflow-wrap:normal}
.site-logo{min-width:100px;width:clamp(100px,24vw,13rem);max-width:none}
@media(max-height:450px){.masthead{height:clamp(48px,14dvh,72px)}}

.resources .resource.is-selected,.resources summary.is-selected,.resources .resource.is-selected:hover,.resources summary.is-selected:hover{background:#e2ad78;color:#35180c;box-shadow:inset .3rem 0 #fff0d5;font-weight:700}

.article-page img{max-width:100%;height:auto;vertical-align:middle}.article-page .article-image-left{float:left;max-width:45%;margin:.3rem 1.2rem .8rem 0}.article-page .article-image-right{float:right;max-width:45%;margin:.3rem 0 .8rem 1.2rem}.article-page main>div{display:flow-root}.article-page td img{max-width:100%}@media(max-width:480px){.article-page .article-image-left,.article-page .article-image-right{float:none;display:block;max-width:100%;margin:.6rem auto 1rem}}

/* One moderately brighter white halo shared by the logo, verse, box and footer. */
:root{--halo-near:18px;--halo-wide:42px;--halo-near-color:#ffffffa6;--halo-wide-color:#ffffff66;--halo:0 0 var(--halo-near) var(--halo-near-color),0 0 var(--halo-wide) var(--halo-wide-color)}
.site{box-shadow:var(--halo),0 12px 30px #40160a35}
.verse,footer{text-shadow:var(--halo)}
.site-logo{filter:drop-shadow(0 0 var(--halo-near) var(--halo-near-color)) drop-shadow(0 0 var(--halo-wide) var(--halo-wide-color))}
#notice{box-shadow:var(--halo)}

/* Slightly wider, larger menu lettering with comfortable line spacing. */
.resources .resource,.resources summary{font-family:Verdana,Geneva,Arial,sans-serif;font-size:1.08rem;letter-spacing:.025em;line-height:1.45;font-kerning:normal}
.resources .resource-children .resource,.resources .resource-children summary{font-size:1rem;letter-spacing:.02em}

/* Preserve the verse’s two original lines; the sizing routine fits their full width. */
.masthead .verse{white-space:nowrap}

.menu-scroll,.content-scroll{position:relative;display:grid;min-height:0;overflow:hidden}.menu-scroll .resources{padding-block:8px}.scroll-cue{position:absolute;left:50%;width:30px;height:18px;transform:translateX(-50%);pointer-events:none;z-index:2;background:#40160ad9;border-radius:9px;display:grid;place-items:center}.scroll-cue::before{content:"";width:6px;height:6px;border-right:1px solid #efc7a6;border-bottom:1px solid #efc7a6}.scroll-cue-up{top:2px}.scroll-cue-up::before{transform:translateY(2px) rotate(225deg)}.scroll-cue-down{bottom:2px}.scroll-cue-down::before{transform:translateY(-2px) rotate(45deg)}

/* Accessible contact errors preserve the filled form behind the dialog. */
.contact-dialog{width:min(92vw,34rem);max-height:85dvh;overflow:auto;padding:1.5rem;border:1px solid #b78a69;border-radius:.5rem;background:#f5ead8;color:#40160a;box-shadow:0 12px 45px #0008}
.contact-dialog::backdrop{background:#160a07b3}
.contact-dialog h2{margin:0 0 1rem;font-size:1.25rem}
.contact-dialog p{margin:0 0 1rem;line-height:1.5}
.contact-dialog a{text-decoration:underline;overflow-wrap:anywhere}
.contact-dialog .form-actions{flex-wrap:wrap;gap:.65rem}
#contact-form button:disabled{opacity:.65;cursor:wait}

/* Reclaim menu-header space on short phones, including landscape. */
@media (max-width:700px) and (max-height:850px), (max-width:1000px) and (max-height:450px){
 .menu-panel>.brand{display:none}
 .menu-panel{grid-template-rows:minmax(0,1fr)}
}