/* ==========================================================================
   Our Beliefs: the opening words and Jude 1:3 side by side, then each part
   with its name held beside its beliefs, every belief a numbered line that
   opens in place. The words come from src/content/pages/our-beliefs.md.
   ========================================================================== */

.beliefs{padding-top:52px;padding-bottom:100px}
.beliefs>*{max-width:1100px;margin-left:auto;margin-right:auto}

/* ---- the opening: what this is, and the verse it rests on ---- */
.b-open{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.b-intro{margin:0;font:400 1.22rem/1.75 var(--f-body);color:var(--text)}
.b-verse{margin:0;padding:28px 32px;border-radius:20px;background:var(--sunken)}
.b-verse blockquote{margin:0}
.b-verse p{margin:0;font:italic 500 1.4rem/1.5 var(--f-display);color:var(--head)}
.b-verse figcaption,.b-end figcaption{margin-top:12px;font:700 .72rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong)}

.b-tools{display:flex;justify-content:flex-end;margin-top:44px}
html:not(.js) .b-tools{display:none}
.b-all{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--sunken);color:var(--head);font:600 .86rem var(--f-body);cursor:pointer}
.b-all:hover{background:var(--line)}

/* ---- each part: its name on the left, held in view while its beliefs pass ---- */
.b-part{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;margin-top:22px;padding-top:26px;border-top:2px solid var(--head)}
.b-part-h{position:sticky;top:24px;align-self:start}
.b-part-n{margin:0 0 6px;font:700 .72rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strong)}
.b-part-h h2{margin:0;font:600 2rem/1.12 var(--f-display);color:var(--head);text-wrap:balance}

/* ---- a belief: a solid number, its name, and its words when opened ---- */
.b-item{border-bottom:1px solid var(--line-strong)}
.b-item:first-child summary{padding-top:4px}
.b-item summary{display:flex;align-items:center;gap:22px;padding:18px 4px;cursor:pointer;list-style:none}
.b-item summary::-webkit-details-marker{display:none}
.b-n{flex:0 0 2.2ch;font:600 1.9rem/1 var(--f-display);color:var(--accent-strong);font-variant-numeric:lining-nums tabular-nums}
.b-t{flex:1;margin:0;font:600 1.45rem/1.2 var(--f-display);color:var(--head)}
.b-chev{flex:none;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.b-item[open] .b-chev{transform:rotate(180deg)}
.b-item summary:hover .b-t{color:var(--accent-strong)}
.b-item summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.b-text{padding:2px 4px 24px calc(2.2ch * 1.9 + 22px)}
.b-text p{margin:0 0 1.05em;font:400 1.06rem/1.85 var(--f-body);color:var(--text)}
.b-text em{font-family:var(--f-display);font-size:1.05em;color:var(--head)}
.b-text strong{color:var(--head)}
.b-text [lang="el"],.b-text [lang="he"]{font-family:var(--f-display);font-size:1.05em}
.belief-note{margin:20px 0 6px;padding:18px 22px;border-radius:16px;background:var(--sunken);border-left:3px solid var(--accent)}
.belief-note p:last-child{margin-bottom:0}
.belief-note-label{margin:0 0 8px!important;font:700 .72rem var(--f-body)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong)!important}

/* ---- the close: Ephesians 4:15 and Soli Deo Gloria ---- */
.b-end{max-width:40rem;margin:80px auto 0;text-align:center}
.b-end blockquote{margin:0}
.b-end p{margin:0;font:italic 500 1.35rem/1.5 var(--f-display);color:var(--head)}
.b-end .b-sdg{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:36px;font:italic 600 1.15rem var(--f-display);color:var(--accent-strong)}
.b-sdg svg{width:28px;height:28px;fill:currentColor}

@media(max-width:900px){
  .b-open{grid-template-columns:1fr;gap:28px}
  .b-part{grid-template-columns:1fr;gap:14px}
  .b-part-h{position:static}
  .b-part-h h2{font-size:1.75rem}
}
@media(max-width:640px){
  .beliefs{padding-top:36px}
  .b-intro{font-size:1.1rem}
  .b-verse{padding:22px 22px}
  .b-verse p{font-size:1.2rem}
  .b-item summary{gap:14px}
  .b-n{font-size:1.5rem}
  .b-t{font-size:1.2rem}
  .b-text{padding:0 2px 20px}
}
@media(prefers-reduced-motion:reduce){.b-chev{transition:none}}