/* ============================================================
   what-we-teach.css  —  single page stylesheet (no partials)
   Fonts: Cinzel (headings) + Libre Baskerville (body).
   Palette: the site's warm tokens (theme.css).
   Font-size scaling: every content size is multiplied by
   var(--wt-scale), set by the font-size control + localStorage.
   ============================================================ */

/* ---- Banner (475px desktop/4k, responsive) --------------- */
.wt-banner { position: relative; width: 100%; height: clamp(240px, 32vw, 475px); overflow: hidden; background: var(--brown-deep); }
.wt-banner__bg { position: absolute; inset: 0; z-index: 0; }
.wt-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.wt-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,14,10,0.45) 0%, rgba(20,14,10,0.12) 32%, transparent 60%); }

/* ---- Font-size control (fixed, top-right) ---------------- */
.wt-fontctrl {
  position: fixed; top: calc(var(--header-h) + 0.7rem); right: 0.9rem; z-index: 45;
  display: flex; align-items: flex-end; gap: 0.1rem;
  background: rgba(253,251,247,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.55rem;
  box-shadow: 0 10px 24px -14px rgba(58,36,23,0.5);
}
.wt-fontctrl__btn { font-family: "Cinzel", Georgia, serif; color: var(--ink-soft); background: none; border: none;
  cursor: pointer; line-height: 1; padding: 0.1rem 0.22rem; border-radius: 6px; transition: color .2s, background .2s; }
.wt-fontctrl__btn:nth-child(1) { font-size: 11px; }
.wt-fontctrl__btn:nth-child(2) { font-size: 14px; }
.wt-fontctrl__btn:nth-child(3) { font-size: 17px; }
.wt-fontctrl__btn:nth-child(4) { font-size: 20px; }
.wt-fontctrl__btn:nth-child(5) { font-size: 24px; }
.wt-fontctrl__btn:hover { color: var(--maroon); }
.wt-fontctrl__btn.is-active { color: var(--maroon); background: rgba(122,31,43,0.10); }
@media (max-width: 520px) { .wt-fontctrl { gap: 0; padding: 0.25rem 0.4rem; }
  .wt-fontctrl__btn:nth-child(4){font-size:18px;} .wt-fontctrl__btn:nth-child(5){font-size:21px;} }

/* ---- Document shell -------------------------------------- */
.wt-doc {
  --wt-scale: 1;
  font-family: "Libre Baskerville", Georgia, serif; color: var(--ink);
  max-width: 860px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem);
  margin-top:30px;
}
.wt-doc h1, .wt-doc h2, .wt-doc h3 { font-family: "Cinzel", Georgia, serif; }

.wt-title { text-align: center; font-size: calc(2.6rem * var(--wt-scale)); font-weight: 600;
  color: var(--brown-deep); letter-spacing: 0.04em; line-height: 1.15; margin-bottom: 1.5rem; }

/* ---- Intro ----------------------------------------------- */
.wt-intro p { font-size: calc(1.0625rem * var(--wt-scale)); line-height: 1.9; color: var(--ink-soft); margin-bottom: 1.1rem; }
.wt-intro .wt-lead { font-size: calc(1.22rem * var(--wt-scale)); color: var(--ink); }

.wt-note { font-size: calc(0.98rem * var(--wt-scale)); line-height: 1.7; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; margin: 1.5rem 0; }

/* ---- Block quotes (key statements; easy to edit) --------- */
.wt-quote { position: relative; margin: 2.25rem 0; padding: 1.1rem 1.4rem 1.1rem 2.4rem;
  border-left: 4px solid var(--maroon); border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(122,31,43,0.06), rgba(122,31,43,0));
  font-family: "Libre Baskerville", Georgia, serif; font-style: italic;
  font-size: calc(1.25rem * var(--wt-scale)); line-height: 1.6; color: var(--brown-deep); }
.wt-quote::before { content: "\201C"; position: absolute; left: 0.7rem; top: 0.1rem;
  font-family: "Cinzel", serif; font-size: calc(2.4rem * var(--wt-scale)); color: var(--orange-red-soft); line-height: 1; }

/* ---- Highlight callout ----------------------------------- */
.wt-highlight { margin: 2.5rem 0; padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--bg-soft); border: 1px solid var(--line); border-top: 4px solid var(--orange-red); border-radius: 12px; }
.wt-highlight__label { font-family: "Cinzel", serif; font-size: calc(0.82rem * var(--wt-scale)); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange-red); margin-bottom: 0.75rem; }
.wt-highlight p { font-size: calc(1.1rem * var(--wt-scale)); line-height: 1.85; color: var(--ink); }

/* ---- Doctrinal statement cards --------------------------- */
.wt-statements { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin: 1.5rem 0; }
.wt-card { position: relative; border: 1px solid var(--line); border-left: 5px solid var(--wt-accent, var(--maroon));
  background: var(--wt-tint, #fff); border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.wt-card__num { font-family: "Cinzel", serif; font-size: calc(1rem * var(--wt-scale)); letter-spacing: 0.18em;
  color: var(--wt-accent, var(--maroon)); display: block; margin-bottom: 0.25rem; }
.wt-card__title { font-size: calc(1.55rem * var(--wt-scale)); font-weight: 600; color: var(--brown-deep);
  line-height: 1.2; margin-bottom: 0.9rem; }
.wt-card__body { font-size: calc(1.0625rem * var(--wt-scale)); line-height: 1.9; color: var(--ink-soft); }
.wt-card--a { --wt-tint: #fdfbf7; --wt-accent: var(--maroon); }
.wt-card--b { --wt-tint: #f8ebe7; --wt-accent: var(--orange-red); }
.wt-card--c { --wt-tint: #f6efe3; --wt-accent: var(--brown); }

/* ---- Scripture references + hover refs ------------------- */
.wt-refs-wrap { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.wt-refs-label { font-family: "Cinzel", serif; font-size: calc(0.72rem * var(--wt-scale)); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--maroon); display: block; margin-bottom: 0.5rem; }
.wt-refs { font-size: calc(0.95rem * var(--wt-scale)); line-height: 2; color: var(--ink-soft); }
.wt-ref { color: var(--maroon); border-bottom: 1px dotted var(--orange-red-soft); cursor: help; white-space: nowrap; }
.wt-ref:hover, .wt-ref:focus-visible { background: rgba(196,80,42,0.13); outline: none; }

/* ---- Scripture popup ------------------------------------- */
.wt-pop { position: fixed; z-index: 80; width: min(360px, 92vw); max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem;
  box-shadow: 0 24px 60px -20px rgba(58,36,23,0.55); display: none;
  font-family: "Libre Baskerville", Georgia, serif; }
.wt-pop.show { display: block; }
.wt-pop__ref { font-family: "Cinzel", serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--maroon); margin-bottom: 0.55rem; }
.wt-pop__body { font-size: 0.92rem; line-height: 1.7; color: var(--ink); }
.wt-pop__body p { margin-bottom: 0.6rem; }
.wt-pop__body p:last-child { margin-bottom: 0; }

/* ---- Section divider ------------------------------------- */
.wt-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--maroon); margin: clamp(2.5rem, 6vw, 4rem) 0; }
.wt-divider::before, .wt-divider::after { content: ""; height: 1px; flex: 1; max-width: 130px;
  background: linear-gradient(90deg, transparent, var(--orange-red-soft)); }
.wt-divider::after { background: linear-gradient(90deg, var(--orange-red-soft), transparent); }

/* ---- "Who Are We Theologically?" ------------------------- */
.wt-section-head { text-align: center; margin: 1rem 0 2rem; }
.wt-section-head h2 { font-size: calc(2.1rem * var(--wt-scale)); font-weight: 600; color: var(--brown-deep); letter-spacing: 0.03em; line-height: 1.2; }
.wt-section-head p { font-size: calc(1rem * var(--wt-scale)); color: var(--ink-soft); font-style: italic; margin-top: 0.5rem; }

.wt-sub { margin: 2.25rem 0; }
.wt-sub__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.wt-sub__head::before { content: ""; width: 34px; height: 2px; background: var(--orange-red); flex-shrink: 0; }
.wt-sub__head h3 { font-size: calc(1.5rem * var(--wt-scale)); font-weight: 600; color: var(--maroon); letter-spacing: 0.02em; }

/* Alternating warm paragraph tones in the long prose */
.wt-prose p { font-size: calc(1.0625rem * var(--wt-scale)); line-height: 1.9; color: var(--ink-soft);
  padding: 0.85rem 1.1rem; border-radius: 8px; margin-bottom: 0.5rem; }
.wt-prose p:nth-of-type(odd) { background: rgba(247,236,224,0.55); }
.wt-prose p:nth-of-type(even) { background: rgba(248,235,231,0.35); }

/* Inline lists (RPW elements, Solas) */
.wt-list { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.55rem; counter-reset: wtl; }
.wt-list li { position: relative; padding: 0.65rem 0.95rem 0.65rem 2.6rem; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 8px; font-size: calc(1rem * var(--wt-scale)); line-height: 1.6; color: var(--ink); }
.wt-list li::before { counter-increment: wtl; content: counter(wtl); position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--maroon); color: var(--on-dark);
  display: grid; place-items: center; font-family: "Cinzel", serif; font-size: 0.72rem; }
.wt-solas { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; }
.wt-solas li { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--orange-red);
  border-radius: 8px; padding: 0.7rem 1rem; font-size: calc(0.98rem * var(--wt-scale)); }
.wt-solas b { font-family: "Cinzel", serif; color: var(--maroon); display: block; font-size: calc(0.95rem * var(--wt-scale)); }


a.wt_link {
    text-decoration: underline;
}

/* ---- Reveal on scroll (this page's own observer) --------- */
.wt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.wt-reveal.wt-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wt-reveal { opacity: 1; transform: none; transition: none; } }
@media (min-width:601px) and (max-width: 2560px) {
    .wt-banner {
        aspect-ratio: 2560/633;
        height: auto;
        width: 100%;
        display: block;
    }
}
@media (max-width: 600px) {
    .wt-banner {
        aspect-ratio: 1086/1218;
        height: auto;
        width: 100%;
        display: block;
    }
}