/* =========================================================
   PICKPREP BLOG
   Master Editorial Blog System
   Version: 2026.1
   Purpose: Clean, responsive, accessible long-form editorial
   ========================================================= */

/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

.blog-page{
    --blog-bg:#f8fafc;
    --blog-surface:#ffffff;
    --blog-surface-soft:#f1f5f9;

    --blog-text:#0f172a;
    --blog-text-soft:#334155;
    --blog-text-muted:#64748b;
    --blog-text-faint:#94a3b8;

    --blog-border:#e2e8f0;
    --blog-border-strong:#cbd5e1;

    --blog-accent:#2563eb;
    --blog-accent-dark:#1d4ed8;
    --blog-accent-soft:#eff6ff;

    --blog-warm:#f97316;
    --blog-warm-soft:#fff7ed;

    --blog-radius-sm:8px;
    --blog-radius-md:12px;
    --blog-radius-lg:18px;

    --blog-content-width:760px;
    --blog-wide-width:1120px;

    --blog-space-1:.5rem;
    --blog-space-2:.75rem;
    --blog-space-3:1rem;
    --blog-space-4:1.5rem;
    --blog-space-5:2rem;
    --blog-space-6:3rem;
    --blog-space-7:4rem;
    --blog-space-8:6rem;

    --blog-shadow-soft:0 8px 30px rgba(15,23,42,.06);
    --blog-focus:0 0 0 3px rgba(37,99,235,.22);

    background:var(--blog-bg);
    color:var(--blog-text);

    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:16px;
    line-height:1.7;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* =========================================================
   02. SCOPED RESET
   ========================================================= */

.blog-page *,
.blog-page *::before,
.blog-page *::after{
    box-sizing:border-box;
}

.blog-page img{
    display:block;
    max-width:100%;
    height:auto;
}

.blog-page a{
    color:var(--blog-accent-dark);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.blog-page a:hover{
    color:var(--blog-accent);
}

.blog-page button,
.blog-page a{