/* ---------- tokens ---------- */
:root{
    --ink:#0B1220;
    --ink-2:#131C2E;
    --primary:#4C8DFF;
    --primary-ink:#0f3d8a;
    --accent:#2FD3C6;
    --accent-ink:#0d5a53;
    --text:#1F2937;
    --text-muted:#6B7280;
    --surface:#F7F8FA;
    --surface-2:#FFFFFF;
    --border:#E5E7EB;
    --white:#FFFFFF;
    --radius:12px;
    --wrap:1120px;
    --font-mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;

    /* Ghost's font-picker (Settings -> Design) overrides these two */
    --gh-font-heading:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --gh-font-body:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --font-display:var(--gh-font-heading);
    --font-body:var(--gh-font-body);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    background:var(--surface-2);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em;text-wrap:balance;margin:0 0 .5em;}
p{margin:0 0 1em;}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap--narrow{max-width:840px;}
.eyebrow{
    font:600 12px/1 var(--font-mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--primary);
    margin:0 0 12px;
}
.section-head{margin-bottom:36px;}
.section-head h2{font-size:clamp(24px,3vw,32px);margin:0;}
.empty-state{color:var(--text-muted);}

/* ---------- buttons & tags ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
}
.btn--primary{background:var(--primary);color:var(--white);}
.btn--primary:hover{background:#3d78e6;}

.tag-chip{
    display:inline-flex;
    align-items:center;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--accent-ink);
    background:rgba(47,211,198,0.14);
    border:1px solid rgba(47,211,198,0.35);
    padding:4px 10px;
    border-radius:999px;
    margin:0 6px 6px 0;
}

/* ---------- header ---------- */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--ink);
}
.site-header__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:68px;
}
.brand{display:flex;align-items:center;}
.brand__es{font:700 20px var(--font-display);fill:var(--white);}
.brand__kalash{font:700 20px var(--font-display);fill:var(--primary);}
.brand__mark{stroke:var(--primary);}

.nav-toggle{
    display:none;
    background:none;border:0;cursor:pointer;
    width:40px;height:40px;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--white);}

.site-nav{display:flex;gap:28px;}
.site-nav a{
    font-size:14px;
    font-weight:500;
    color:#B9C2D4;
}
.site-nav a:hover{color:var(--white);}

@media (max-width:768px){
    .nav-toggle{display:flex;}
    .site-nav{
        position:absolute;
        top:68px;left:0;right:0;
        background:var(--ink);
        flex-direction:column;
        gap:0;
        padding:8px 24px 20px;
        display:none;
    }
    .site-nav.is-open{display:flex;}
    .site-nav a{padding:10px 0;border-bottom:1px solid var(--ink-2);}
}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--white);padding:72px 0 88px;}
.hero__row{display:flex;align-items:center;gap:48px;}
.hero__text{flex:1 1 420px;}
.hero__text h1{font-size:clamp(34px,5vw,52px);margin:6px 0 4px;color:var(--white);}
.hero__text h1 .accent{color:var(--primary);}
.hero__text h2{font-size:clamp(18px,2.4vw,22px);font-weight:500;color:#AEB9CC;margin:0;}
.hero__portrait{flex:1 1 280px;max-width:320px;}
.hero__portrait img{border-radius:var(--radius);}
@media (max-width:768px){
    .hero__row{flex-direction:column-reverse;text-align:center;}
    .hero__portrait{max-width:220px;}
}

/* ---------- about ---------- */
.about{padding:88px 0;background:var(--surface-2);}
.about__row{display:flex;gap:56px;align-items:center;}
.about__portrait{flex:1 1 360px;}
.about__portrait img{border-radius:var(--radius);}
.about__text{flex:1 1 420px;}
.about__text .lede{color:var(--text-muted);font-size:17px;}
.about-info{list-style:none;margin:0 0 28px;padding:0;}
.about-info li{
    display:flex;
    gap:16px;
    padding:10px 0;
    border-bottom:1px solid var(--border);
    font-size:14px;
}
.about-info li span:first-child{width:90px;flex-shrink:0;font-weight:600;color:var(--text-muted);}
.about-info li a{color:var(--primary);}
.about__actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.counter__number{display:block;font:700 34px var(--font-display);color:var(--primary);}
.counter__label{font-size:13px;color:var(--text-muted);}
@media (max-width:860px){.about__row{flex-direction:column;}}

/* ---------- blog grid / cards ---------- */
.blog{padding:88px 0;background:var(--surface-2);}
.blog--related{padding-top:0;}
.post-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:28px;
}
.post-card{
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface-2);
    display:flex;
    flex-direction:column;
}
.post-card__image{
    display:block;
    aspect-ratio:16/10;
    background-size:cover;
    background-position:center;
    background-color:var(--surface);
}
.post-card__body{padding:20px;}
.post-card__title{font-size:18px;margin:6px 0 8px;}
.post-card__title a:hover{color:var(--primary);}
.post-card__excerpt{color:var(--text-muted);font-size:14px;margin-bottom:14px;}
.post-card__meta{display:flex;gap:10px;font-size:12.5px;color:var(--text-muted);}

/* ---------- single post ---------- */
.post__header{padding:56px 0 32px;text-align:center;}
.post__header h1{font-size:clamp(28px,4vw,40px);margin-top:14px;}
.post__byline{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;}
.post__avatar{width:36px;height:36px;border-radius:50%;}
.post__author{display:block;font-weight:600;font-size:14px;}
.post__meta{display:block;font-size:12.5px;color:var(--text-muted);}
.post__feature-image{max-width:1000px;margin:0 auto 40px;padding:0 24px;}
.post__feature-image img{border-radius:var(--radius);}
.post__content{font-size:18px;line-height:1.75;}
.post__content h2{font-size:26px;margin-top:1.6em;}
.post__content h3{font-size:21px;margin-top:1.4em;}
.post__content p{margin-bottom:1.3em;}
.post__content a{color:var(--primary);text-decoration:underline;}
.post__content img{border-radius:var(--radius);margin:1.6em 0;}
.post__content pre{
    background:var(--ink);
    color:#dfe6f3;
    padding:18px;
    border-radius:10px;
    overflow-x:auto;
    font-size:14px;
}
.post__content code{font-family:var(--font-mono);}
.post__content blockquote{
    margin:1.6em 0;
    padding-left:18px;
    border-left:3px solid var(--primary);
    color:var(--text-muted);
    font-style:italic;
}
/* Koenig editor breakout image widths */
.post__content .kg-width-wide{
    width:100%;
    max-width:min(1040px,calc(100vw - 48px));
    margin-left:calc(50% - min(520px,calc((100vw - 48px) / 2)));
    margin-right:calc(50% - min(520px,calc((100vw - 48px) / 2)));
}
.post__content .kg-width-full{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}
.post__content .kg-width-wide img,
.post__content .kg-width-full img{
    width:100%;
    border-radius:0;
}
.post__content .kg-width-wide img{border-radius:var(--radius);}

.post__tags{margin:40px 0 8px;}
.post__share{
    display:flex;
    align-items:center;
    gap:14px;
    margin:32px 0 64px;
    padding-top:24px;
    border-top:1px solid var(--border);
    font-size:13px;
    color:var(--text-muted);
}
.share-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:8px;
    background:#0A66C2;
    color:#fff;
    font-weight:600;
    font-size:13px;
}
.share-btn--linkedin:hover{background:#0958a8;}

/* ---------- archive (tag) ---------- */
.archive-header{padding:56px 0 24px;background:var(--surface);}
.archive-header h1{font-size:clamp(26px,4vw,36px);}
.archive-header .lede{color:var(--text-muted);max-width:60ch;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#8492A9;padding:40px 0;}
.site-footer__row{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.social-links{display:flex;gap:18px;}
.social-links a{color:#8492A9;}
.social-links a:hover{color:var(--white);}
.copyright{margin:0;font-size:12.5px;}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.reveal.is-visible{opacity:1;transform:none;}