@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@1,18,400;1,18,500&display=swap");

:root {
    --sf-brand-50:  #E5F5FF;
    --sf-brand-100: #C7E9FF;
    --sf-brand-200: #8DD0FF;
    --sf-brand-300: #00D1FF;
    --sf-brand-400: #00B0FF;
    --sf-brand-500: #018EFF;
    --sf-brand-600: #0067AD;
    --sf-brand-700: #014580;
    --sf-brand-900: #002A55;

    --sf-accent-50:  #FFF4ED;
    --sf-accent-100: #FFE4D0;
    --sf-accent-200: #FFC79A;
    --sf-accent-300: #FFB57A;
    --sf-accent-500: #FF7A38;
    --sf-accent-600: #E85F1A;
    --sf-accent-700: #B3450A;

    --sf-warm-50:      #FBF6EE;
    --sf-warm-100:     #F6EEDF;
    --sf-warm-surface: #FBF6EE;

    --sf-ink-900: #0C1626;
    --sf-ink-800: #18243A;
    --sf-ink-700: #2A3548;
    --sf-ink-500: #5B6878;
    --sf-ink-400: #8A95A8;
    --sf-ink-300: #B6BECC;

    --sf-line-200:  #E5EAF2;
    --sf-line-100:  #EEF1F6;
    --sf-surface:   #F7F9FC;
    --sf-surface-2: #FBFCFE;
    --sf-paper:     #FCFAF6;
    --sf-white:     #FFFFFF;

    --sf-success: #11A56E;
    --sf-warn:    #E0A400;

    --sf-cyan: #5EEAFF;
    --sf-mint: #84EFCE;

    --sf-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sf-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sf-font-serif:   "Newsreader", "Times New Roman", serif;
    --sf-font-mono:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --sf-radius-sm: 6px;
    --sf-radius:    10px;
    --sf-radius-lg: 16px;
    --sf-radius-xl: 22px;

    --sf-shadow-sm: 0 1px 2px rgba(12, 22, 38, 0.04), 0 1px 1px rgba(12, 22, 38, 0.03);
    --sf-shadow-md: 0 6px 24px -8px rgba(12, 22, 38, 0.10), 0 2px 6px rgba(12, 22, 38, 0.05);
    --sf-shadow-lg: 0 24px 48px -16px rgba(12, 22, 38, 0.18), 0 8px 16px -8px rgba(12, 22, 38, 0.06);
}

.sf-serif-it{font-family: var(--sf-font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.015em; font-size: 1.02em;}
.sf-initials{display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sf-brand-50); color: var(--sf-brand-600); font-family: var(--sf-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; flex-shrink: 0;}
.sf-initials--lg{width: 64px; height: 64px; font-size: 19px;}
.sf-initials--sm{width: 36px; height: 36px; font-size: 13px;}
.sf-initials--accent{background: var(--sf-accent-50); color: var(--sf-accent-600);}
.sf-initials--dark{background: var(--sf-ink-900); color: #fff;}
.sf-initials--square{border-radius: var(--sf-radius);}


@media (max-width: 640px){
    blockquote{margin: 24px 0; padding: 22px 22px 22px 24px; font-size: 17px;}
}