/* Wazomind blog — clean, readable editorial theme (light, optimized for long-form + SEO). */
:root{
  --paper:#fbfcfe; --panel:#fff; --ink:#0d1420; --ink-2:#3d4657; --ink-3:#727d90;
  --line:#e7ecf3; --brand:#0d9e92; --brand-deep:#0b857b; --brand-tint:#e7f7f5;
  --font:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--brand-deep);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}
.wide{max-width:1000px;margin:0 auto;padding:0 22px}

/* nav */
.bnav{border-bottom:1px solid var(--line);background:rgba(251,252,254,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.bnav-in{max-width:1000px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:720;color:var(--ink);font-size:1.06rem;letter-spacing:-.01em}
.logo{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;font-weight:820;font-size:16px}
.bnav a.cta{font-family:var(--sans);font-weight:640;font-size:.92rem;background:var(--brand);color:#fff;padding:.5em 1em;border-radius:9px} .bnav a.cta:hover{background:var(--brand-deep);text-decoration:none}
.bnav .links{display:flex;gap:22px;font-family:var(--sans);font-size:.94rem;color:var(--ink-2)} @media(max-width:640px){.bnav .links{display:none}}

/* article */
article{padding:52px 0 20px}
.kicker{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep)}
h1{font-family:var(--sans);font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.1;color:var(--ink);letter-spacing:-.025em;margin:14px 0 0;font-weight:700;text-wrap:balance}
.meta{font-family:var(--sans);color:var(--ink-3);font-size:.92rem;margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}
article h2{font-family:var(--sans);font-size:1.6rem;color:var(--ink);letter-spacing:-.02em;margin:44px 0 0;line-height:1.2}
article h3{font-family:var(--sans);font-size:1.2rem;color:var(--ink);margin:30px 0 0}
article p{margin:20px 0 0} article ul,article ol{margin:18px 0 0;padding-left:22px} article li{margin:9px 0}
article strong{color:var(--ink)}
.lede{font-size:1.28rem;line-height:1.55;color:var(--ink-2);margin-top:22px;font-family:var(--font)}
blockquote{margin:28px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);font-family:var(--font);font-size:1.3rem;color:var(--ink);line-height:1.45}
.tablewrap{overflow-x:auto;margin-top:24px} table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.96rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)} thead th{background:var(--panel);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
hr{border:none;border-top:1px solid var(--line);margin:44px 0}
figure{margin:28px 0 0} .callout{background:var(--brand-tint);border:1px solid rgba(13,158,146,.25);border-radius:14px;padding:20px 22px;margin-top:28px;font-family:var(--sans);font-size:1rem}

/* CTA box */
.ctabox{margin:40px 0 0;background:var(--ink);color:#d6dee9;border-radius:18px;padding:30px 28px;font-family:var(--sans);text-align:center}
.ctabox h3{font-family:var(--sans);color:#fff;font-size:1.4rem;margin:0}
.ctabox p{color:#9aa6b6;margin-top:8px}
.ctabox a{display:inline-block;margin-top:18px;background:var(--brand);color:#fff;font-weight:660;padding:.75em 1.5em;border-radius:11px} .ctabox a:hover{background:var(--brand-deep);text-decoration:none}

/* related + footer */
.related{margin-top:48px;font-family:var(--sans)} .related h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 12px}
.related a{display:block;padding:12px 0;border-top:1px solid var(--line);color:var(--ink);font-weight:560} .related a:hover{color:var(--brand-deep)}
footer{border-top:1px solid var(--line);margin-top:56px;padding:36px 0 60px;font-family:var(--sans);color:var(--ink-3);font-size:.9rem}
.foot-in{max-width:1000px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-in a{color:var(--ink-3)} .foot-in a:hover{color:var(--ink)}

/* blog index */
.hero-b{padding:56px 0 8px} .hero-b h1{font-size:clamp(2.2rem,5vw,3.2rem)}
.hero-b p{font-family:var(--font);font-size:1.3rem;color:var(--ink-2);margin-top:16px;max-width:40ch}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:36px 0 20px} @media(max-width:720px){.posts{grid-template-columns:1fr}}
.post-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 24px;transition:border-color .15s,transform .15s} .post-card:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.post-card .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep)}
.post-card h2{font-family:var(--sans);font-size:1.3rem;color:var(--ink);margin:10px 0 0;line-height:1.25;letter-spacing:-.01em}
.post-card p{color:var(--ink-2);margin-top:10px;font-size:.98rem}
.post-card .rd{color:var(--ink-3);font-size:.85rem;margin-top:14px;font-family:var(--mono)}