body.rhema-design-system {
    --rhema-blue: #1264f3;
    --rhema-blue-dark: #0b3f9c;
    --rhema-purple: #6d45d8;
    --rhema-pink: #c63e89;
    --rhema-ink: #10203f;
    --rhema-text: #43516d;
    --rhema-muted: #69758c;
    --rhema-surface: #ffffff;
    --rhema-surface-soft: #f4f7fc;
    --rhema-surface-blue: #edf4ff;
    --rhema-border: rgba(40, 67, 120, 0.14);
    --rhema-radius-sm: 12px;
    --rhema-radius-md: 20px;
    --rhema-radius-lg: 30px;
    --rhema-shadow-sm: 0 8px 24px rgba(27, 48, 92, 0.07);
    --rhema-shadow-md: 0 18px 48px rgba(27, 48, 92, 0.11);
    --rhema-shadow-lg: 0 28px 80px rgba(27, 48, 92, 0.15);
    --rhema-container: 1180px;
    --rhema-content: 820px;
    color: var(--rhema-text);
    background:
        radial-gradient(circle at 8% 8%, rgba(18, 100, 243, 0.09), transparent 30rem),
        radial-gradient(circle at 92% 20%, rgba(109, 69, 216, 0.08), transparent 28rem),
        var(--rhema-surface-soft);
}

body.rhema-design-system,
body.rhema-design-system button,
body.rhema-design-system input,
body.rhema-design-system select,
body.rhema-design-system textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.rhema-design-system * {
    box-sizing: border-box;
}

body.rhema-design-system main {
    background: transparent;
}

body.rhema-design-system .wp-site-blocks {
    overflow: clip;
}

body.rhema-design-system :focus-visible {
    outline: 3px solid rgba(18, 100, 243, 0.42);
    outline-offset: 4px;
}

body.rhema-design-system .entry-content,
body.rhema-design-system .wp-block-post-content {
    width: min(var(--rhema-container), calc(100% - clamp(24px, 5vw, 64px)));
    margin-inline: auto;
    padding-bottom: clamp(64px, 10vw, 120px);
}

body.rhema-design-system .entry-content > *,
body.rhema-design-system .wp-block-post-content > * {
    max-width: var(--rhema-content);
    margin-inline: auto;
}

body.rhema-design-system .entry-content > .alignwide,
body.rhema-design-system .wp-block-post-content > .alignwide,
body.rhema-design-system .entry-content > .wp-block-columns,
body.rhema-design-system .wp-block-post-content > .wp-block-columns,
body.rhema-design-system .entry-content > .wp-block-group,
body.rhema-design-system .wp-block-post-content > .wp-block-group,
body.rhema-design-system .entry-content > .wp-block-cover,
body.rhema-design-system .wp-block-post-content > .wp-block-cover {
    max-width: var(--rhema-container);
}

body.rhema-design-system p,
body.rhema-design-system li {
    color: var(--rhema-text);
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.78;
}

body.rhema-design-system p {
    margin: 0 0 1.35em;
}

body.rhema-design-system h1,
body.rhema-design-system h2,
body.rhema-design-system h3,
body.rhema-design-system h4,
body.rhema-design-system h5,
body.rhema-design-system h6 {
    color: var(--rhema-ink);
    font-weight: 750;
    line-height: 1.12;
    text-wrap: balance;
}

body.rhema-design-system h2 {
    margin: clamp(54px, 8vw, 96px) 0 20px;
    font-size: clamp(30px, 4.5vw, 52px);
    letter-spacing: -0.035em;
}

body.rhema-design-system h3 {
    margin: clamp(34px, 5vw, 56px) 0 14px;
    font-size: clamp(23px, 3vw, 34px);
    letter-spacing: -0.025em;
}

body.rhema-design-system h4 {
    margin: 28px 0 12px;
    font-size: clamp(19px, 2vw, 24px);
}

body.rhema-design-system a {
    color: var(--rhema-blue);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

body.rhema-design-system a:hover {
    color: var(--rhema-blue-dark);
}

body.rhema-design-system hr,
body.rhema-design-system .wp-block-separator {
    max-width: var(--rhema-container);
    margin: clamp(48px, 7vw, 84px) auto;
    border: 0;
    border-top: 1px solid var(--rhema-border);
}

body.rhema-design-system img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 700px) {
    body.rhema-design-system .entry-content,
    body.rhema-design-system .wp-block-post-content {
        width: min(100% - 24px, var(--rhema-container));
    }

    body.rhema-design-system p,
    body.rhema-design-system li {
        font-size: 16px;
        line-height: 1.72;
    }
}
