/* ============================================================================
   Mission Caleb — shared minimalist theme layer (loaded site-wide).
   The design system used by the reports / team / gallery pages, extracted so
   every page shares one look: airy headers, ink/muted type, gold accent.
   ========================================================================== */
:root {
    --mc-ink:      #16181d;
    --mc-muted:    #8b909a;
    --mc-faint:    #b9bec7;
    --mc-line:     #ececee;
    --mc-accent:   #b0894e;
    --mc-accent-2: #e7c877;
    --mc-paper:    #f6f4ef;
    --mc-navy:     #141d38;
}

/* ── Reusable page header (airy masthead) ───────────────────────────────── */
.pagehead {
    background: #fff;
    text-align: center;
    padding: clamp(150px, 20vh, 210px) 20px clamp(30px, 5vh, 58px);
}
.pagehead__eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
    color: var(--mc-accent);
}
.pagehead__title {
    margin: 22px auto 0; max-width: 16ch;
    font-size: clamp(32px, 5vw, 54px); font-weight: 400; letter-spacing: -.02em;
    line-height: 1.12; color: var(--mc-ink);
}
.pagehead__lead {
    max-width: 540px; margin: 20px auto 0;
    font-size: 16px; line-height: 1.75; color: var(--mc-muted);
}
.pagehead__rule { width: 34px; height: 2px; margin: 30px auto 0; background: var(--mc-ink); border-radius: 2px; }

/* ── Section rhythm + heading ───────────────────────────────────────────── */
.mc-sec { padding: clamp(56px, 9vh, 96px) 0; background: #fff; }
.mc-sec--paper { background: var(--mc-paper); }
.mc-sechead { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 5vh, 52px); }
.mc-sechead__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mc-accent); }
.mc-sechead__title { margin: 15px 0 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; color: var(--mc-ink); }
.mc-sechead__lead { margin: 14px auto 0; max-width: 540px; font-size: 15.5px; line-height: 1.7; color: var(--mc-muted); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.mc-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 30px; border-radius: 999px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.mc-btn--primary { background: var(--mc-ink); color: #fff !important; }
.mc-btn--primary:hover, .mc-btn--primary:focus-visible {
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    color: #1a1205 !important; transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(176,137,78,.5); text-decoration: none;
}
.mc-btn--ghost { border-color: var(--mc-line); color: var(--mc-ink) !important; background: none; }
.mc-btn--ghost:hover, .mc-btn--ghost:focus-visible { border-color: var(--mc-accent); color: var(--mc-accent) !important; text-decoration: none; }

/* Scroll reveal (.mc-reveal) is provided by church_theme.css + custom.js
   (adds .mc-visible when in view) — new pages reuse it, nothing to redefine. */

/* ── Harmonise legacy class-based headings to the minimalist look ───────── */
.section_title,
.section-title h2 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 400 !important;
    color: var(--mc-ink) !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}
.section_subtitle,
.section-title p { color: var(--mc-muted) !important; }

@media (prefers-reduced-motion: reduce) {
    /* accessibility safety: never leave reveal content hidden */
    .mc-reveal { opacity: 1 !important; transform: none !important; }
}