.faith-content {max-width:950px;margin:auto;padding:2rem 0;font:17px/1.6 Georgia,serif;}
@scope (.faith-content) {
*{box-sizing:border-box}body{margin:0;background:#faf7f2;color:#302720;font:17px/1.6 Georgia,serif}header,footer{background:white;border-block:1px solid #ddd0bf;padding:1rem max(5vw,calc((100% - 1050px)/2));display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}header img{width:175px;max-height:65px;object-fit:contain}nav,.ends{display:flex;gap:1rem;flex-wrap:wrap}a{color:#74324c;text-underline-offset:.24em}nav a,small,.eyebrow,button,label,.ends,footer{font-family:system-ui,sans-serif}nav a{font-size:.92rem}nav a[aria-current]{font-weight:bold}main{max-width:950px;margin:auto;padding:3rem 1.2rem}h1,h2,h3{line-height:1.15;font-weight:500;margin:.35em 0}h1{font-size:clamp(2.4rem,6vw,4.5rem)}h2{font-size:2rem}h3{font-size:1.55rem}.lead{font-size:1.28rem;max-width:48rem}.eyebrow,small{color:#795538;font-size:.82rem;letter-spacing:.07em}.eyebrow{text-transform:uppercase;font-weight:bold}section{margin:2.3rem 0}article,.reflection{background:#fff;border:1px solid #d5c3ac;border-radius:8px;padding:1.35rem}article p{margin:.45rem 0}.stem{display:grid;justify-items:center}.stem article{width:min(540px,100%);text-align:center}.stem i{height:18px;border-left:2px solid #aa8557}.branches,.films{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.branches{position:relative;padding-top:24px}.branches:before{content:"";position:absolute;top:0;left:25%;right:25%;height:23px;border:2px solid #aa8557;border-bottom:none}.reflection{max-width:720px}.reflection label{display:block;font-weight:bold}.reflection input{display:block;width:100%;height:40px;accent-color:#813950}.ends{justify-content:space-between;font-size:.85rem}.reflection h2{margin-top:1.2rem}.source{font-size:.94rem}.films iframe{width:100%;aspect-ratio:16/9;border:0}.films button{margin:.6rem .4rem .6rem 0;background:#673148;color:white;border:0;border-radius:5px;padding:.8rem;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #976021;outline-offset:3px}.skip{position:absolute;left:-200vw}.skip:focus{left:1rem;background:white}.films a{white-space:nowrap}@media(max-width:620px){.films{grid-template-columns:1fr}.branches{gap:.45rem}.branches article{padding:.7rem}.branches h3{font-size:1.35rem}main{padding-top:1.5rem}nav{gap:.75rem}}

.bishop-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  width: 100%;
}
.bishop-row article { width: 100%; }
@media (max-width: 640px) {
  .bishop-row { gap: .3rem; }
  .bishop-row article { padding: .65rem .3rem; }
  .bishop-row h3 { font-size: clamp(.9rem, 3.6vw, 1.35rem); }
  .bishop-row small { font-size: .72rem; letter-spacing: normal; }
  .bishop-row p { font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
}

}

#lay-ministries dl { margin: .75rem 0 1.5rem; }
#lay-ministries dd { margin: .15rem 0 .9rem; }

#reflection-action { display:block; width:100%; padding:.7rem; margin:.4rem 0 1.25rem; font:inherit; resize:vertical; border:1px solid #aa9684; border-radius:.4rem; }

.role-links { display:flex; flex-direction:column; align-items:center; gap:.25rem; margin-top:.6rem; }
.role-links button { color:#74324c; background:transparent; border:0; text-decoration:underline; text-underline-offset:.18em; cursor:pointer; padding:.45rem .15rem; font:600 .92rem/1.35 system-ui,sans-serif; }
.role-links button:hover,.role-links button:focus-visible { background:#f5e9ed; color:#65243d; }
.role-popup[popover] { box-sizing:border-box; position:fixed; inset:0; margin:auto; width:min(32rem,90vw); max-height:80dvh; overflow:auto; padding:1.5rem; border:1px solid #d5c3ac; border-radius:.65rem; background:#fffcf7; color:#302720; text-align:left; box-shadow:0 .75rem 3rem #352b2444; }
.role-popup::backdrop { background:#30272066; }
.role-popup h3 { margin:0 0 .6rem; }
.role-popup h4 { margin:1rem 0 .35rem; }
.role-popup button { margin-top:.75rem; }

/* Keep the five levels visible, with the longer descriptions in the popups. */
.faith-content:has(.hierarchy-chart), main#content:has(.hierarchy-chart) { padding-block-start: .7rem; }
:where(.faith-content, main#content):has(.hierarchy-chart) > .eyebrow { margin: 0; }
:where(.faith-content, main#content):has(.hierarchy-chart) > h1 { font-size: clamp(1.65rem, 3vw, 2.4rem); margin: .1rem 0 .45rem; }
section.hierarchy-chart { margin: 0 0 1.25rem; }
.hierarchy-chart .stem > i { height: .55rem; }
.hierarchy-chart .stem article { padding: .25rem .65rem .55rem; min-width: 0; }
.hierarchy-chart .role-links { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: .25rem; margin: 0; }
.hierarchy-chart .role-links button { min-width: 0; min-height: 24px; padding: .15rem 0; font-size: .82rem; line-height: 1.15; text-align: left; }
.hierarchy-chart .role-links button:last-child { text-align: right; }
.hierarchy-chart article > h3 { margin: 0; font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.15; }
.hierarchy-chart article > small { display: block; margin-top: .12rem; font-size: .8rem; line-height: 1.25; letter-spacing: .015em; }
@media (max-width: 640px) {
  .hierarchy-chart .bishop-row article { padding-inline: .25rem; }
  .hierarchy-chart .bishop-row .role-links { gap: .1rem; }
  .hierarchy-chart .bishop-row .role-links button { font-size: .76rem; }
  .hierarchy-chart .bishop-row article > h3 { font-size: clamp(.88rem, 3.45vw, 1.18rem); }
}

.lay-map-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:1rem; }
.lay-plan { position:relative; border:1px solid #cab7a1; border-radius:.5rem; overflow:hidden; }
.lay-plan svg { display:block; width:100%; height:auto; }
.lay-plan .lay-pin { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; padding:0; width:clamp(25px,4vw,34px); height:clamp(25px,4vw,34px); border-radius:50%; background:#763550; color:white; border:2px solid white; font:bold 14px system-ui; cursor:pointer; }
.lay-key { list-style:none; padding:0; margin:0; }
.lay-key button { background:transparent; color:#66324a; border:0; text-align:left; font:600 .94rem/1.3 system-ui; display:flex; align-items:center; gap:.55rem; padding:.45rem .25rem; cursor:pointer; }
.lay-key span { display:inline-grid; flex:none; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; background:#f2e4e9; }
.lay-key button:hover { text-decoration:underline; }
@media(max-width:680px){.lay-map-layout{grid-template-columns:1fr}.lay-key{columns:2}.lay-key li{break-inside:avoid}}