/* Vox Consecrata / Stage 4 public pages — one component, one responsibility. */
:root { --vc4-purple:#261033; --vc4-gold:#d5ac45; --vc4-ink:#2b2130; --vc4-muted:#716a73; --vc4-cream:#fffaf2; --vc4-rule:#e6dedf; }
.vc4-hero { background:var(--vc4-purple); color:#fff8e9; padding:23px 0 25px; border-bottom:2px solid var(--vc4-gold); text-align:center; }
.vc4-hero .wrap { max-width:1100px; }
.vc4-hero .eyebrow { display:block; margin-bottom:7px; font:700 10px/1.4 Arial,sans-serif; letter-spacing:1.8px; color:var(--vc4-gold); }
.vc4-hero h1 { margin:0; color:#fff8e9; font-size:clamp(23px,4.2vw,34px); font-weight:600; line-height:1.16; letter-spacing:-.4px; }
.vc4-hero p { margin:7px 0 0; max-width:680px; margin-left:auto; margin-right:auto; font:400 13px/1.5 Arial,sans-serif; color:#e5dbe7; }
.vc4-content { padding:32px 0 42px; }
.vc4-content.alt { background:#f6f0e7; }
.vc4-content .wrap { max-width:1100px; }
.vc4-content h2 { margin:0 0 13px; text-align:center; font-size:clamp(23px,3vw,31px); color:var(--vc4-ink); }
.vc4-content p { font-size:15px; line-height:1.7; }
.vc4-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vc4-card { min-width:0; background:#fff; border:1px solid var(--vc4-rule); border-radius:9px; padding:18px; box-shadow:0 3px 15px rgba(38,16,51,.035); }
.vc4-card h3 { margin:8px 0 5px; font-size:18px; line-height:1.3; color:var(--vc4-ink); }
.vc4-card p { margin:7px 0; font:400 13px/1.6 Arial,sans-serif; color:var(--vc4-muted); }
.vc4-card a { color:#4d285e; text-decoration:none; font:600 13px/1.5 Arial,sans-serif; }
.vc4-card a:hover { text-decoration:underline; }
.vc4-photo { width:100%; height:190px; object-fit:cover; border-radius:6px; }
.vc4-emblem { width:72px; height:72px; object-fit:contain; flex:none; border-radius:5px; }
.vc4-section-card { display:flex; gap:16px; align-items:center; }
.vc4-section-card h3 { margin:0 0 5px; }
.vc4-section-card .vc4-section-meta { min-width:0; }
.vc4-section-card .vc4-section-meta a { display:inline-flex; align-items:center; gap:6px; }
.vc4-tabs { display:flex; align-items:center; gap:5px; overflow-x:auto; white-space:nowrap; margin:0 0 20px; padding:0 0 10px; border-bottom:1px solid var(--vc4-rule); scrollbar-width:thin; }
.vc4-tabs a { display:inline-flex; align-items:center; gap:6px; flex:none; padding:8px 10px; color:#65556c; font:600 12px/1.3 Arial,sans-serif; text-decoration:none; border-bottom:2px solid transparent; }
.vc4-tabs a[aria-current="page"] { color:var(--vc4-purple); border-color:var(--vc4-gold); }
.vc4-tabs a:hover { color:var(--vc4-purple); }
.vc4-filter-mark { color:#a07c2d; font-size:13px; }
.vc4-empty { max-width:620px; margin:25px auto; padding:24px 16px; text-align:center; border:1px solid var(--vc4-rule); border-radius:8px; background:#fff; color:var(--vc4-muted); font:400 14px/1.6 Arial,sans-serif; }
.vc4-form { display:grid; gap:14px; width:100%; max-width:700px; margin:20px auto 0; }
.vc4-form label { display:grid; gap:6px; font:600 13px/1.5 Arial,sans-serif; color:var(--vc4-ink); }
.vc4-form input,.vc4-form textarea { width:100%; min-width:0; padding:12px 13px; border:1px solid #cbbfcf; border-radius:7px; background:#fff; color:var(--vc4-ink); font:400 15px/1.5 Arial,sans-serif; }
.vc4-form textarea { min-height:130px; resize:vertical; }
.vc4-form :is(input,textarea):focus-visible { outline:2px solid #a582ba; outline-offset:2px; }
.vc4-button { padding:12px 20px; background:var(--vc4-purple); color:#fff; border:0; border-radius:7px; font:600 14px Arial,sans-serif; cursor:pointer; }
.vc4-button:hover { background:#4d2860; }
.vc4-note { padding:12px 15px; border-left:3px solid #498765; background:#eff8f1; color:#225038; border-radius:4px; }
.vc4-prose { max-width:850px; margin:0 auto; color:#423744; text-align:center; line-height:1.8; white-space:pre-line; }
.vc4-contact-intro { text-align:center; }
.vc4-contact-intro a { overflow-wrap:anywhere; color:#4d285e; }
@media (max-width:850px) { .vc4-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
    .vc4-hero { padding:18px 0 19px; }
    .vc4-hero h1 { font-size:24px; }
    .vc4-hero p { font-size:12px; margin-top:5px; }
    .vc4-content { padding:24px 0 32px; }
    .vc4-content h2 { font-size:24px; }
    .vc4-grid { grid-template-columns:1fr; gap:10px; }
    .vc4-card { padding:15px; }
    .vc4-section-card { gap:13px; }
    .vc4-emblem { width:58px; height:58px; }
    .vc4-photo { height:180px; }
    .vc4-tabs { margin-bottom:16px; }
    .vc4-form { margin-top:16px; }
}