/* vishkul/blog — shares portfolio tokens, tuned for long-form reading */
:root{
  --bg:#0b0b0d; --surface:#141418; --surface-2:#17171c; --bg-soft:#111114;
  --border:#26262b; --border-2:#34343b;
  --text:#f2f1ee; --dim:#a3a29c; --dimmer:#6b6a64;
  --pink:#ff2d78; --pink-soft:#ff5e96; --violet:#a06bff;
  --green:#3ddc84; --amber:#febc2e; --red:#ff4d4d;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display:"Space Grotesk", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size:32px 32px;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--pink);color:#0b0b0d;}
.wrap{max-width:760px;margin:0 auto;padding:0 26px;}
.mono{font-family:var(--mono);}
.mark{background:var(--pink);color:#0b0b0d;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* nav (matches portfolio) */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--border);}
.brand{font-family:var(--mono);font-size:14px;color:var(--dim);display:flex;align-items:center;gap:8px;font-weight:700;}
.brand b{color:var(--text);}
.brand .accent{color:var(--pink);}
.brand .blink{width:8px;height:15px;background:var(--pink);display:inline-block;animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.topbar .nav-links{display:flex;gap:22px;}
.topbar .nav-links a{font-family:var(--mono);font-size:13px;color:var(--dimmer);transition:color .18s;}
.topbar .nav-links a:hover,.topbar .nav-links a.active{color:var(--pink);}
a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:3px;}
@media(max-width:560px){.topbar .nav-links{gap:15px;}.topbar .nav-links a{font-size:12px;}}

/* ---- blog index ---- */
.blog-hero{margin-top:52px;}
.blog-hero .kicker{font-family:var(--mono);font-size:12px;color:var(--pink);letter-spacing:.04em;}
.blog-hero h1{font-family:var(--display);font-size:clamp(32px,6vw,50px);font-weight:700;line-height:1.04;margin-top:14px;letter-spacing:-.035em;}
.blog-hero .sub{margin-top:16px;color:var(--dim);font-size:16px;max-width:60ch;}

.post-list{margin-top:44px;display:flex;flex-direction:column;gap:2px;}
.post-item{display:block;border:1px solid var(--border);border-radius:12px;padding:22px 24px;background:var(--surface);transition:border-color .15s, transform .15s;margin-bottom:14px;}
.post-item:hover{border-color:var(--pink);transform:translateY(-2px);}
.post-item .pmeta{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:11px;}
.post-item .ptag{color:var(--violet);border:1px solid rgba(160,107,255,.3);border-radius:5px;padding:2px 8px;font-weight:600;}
.post-item .ptag.mkt{color:var(--pink);border-color:rgba(255,45,120,.3);}
.post-item h2{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--text);}
.post-item:hover h2{color:var(--pink);}
.post-item .pexc{margin-top:9px;color:var(--dim);font-size:15px;line-height:1.6;}
.post-item .pread{margin-top:13px;font-family:var(--mono);font-size:12.5px;color:var(--pink);}
.post-item .pread::after{content:" →";}
.post-item.soon{opacity:.6;pointer-events:none;}
.post-item.soon .pread{color:var(--dimmer);}

.blog-empty{margin-top:40px;padding:26px;border:1px dashed var(--border-2);border-radius:12px;color:var(--dim);font-family:var(--mono);font-size:13.5px;line-height:1.8;}

.blog-foot{margin:56px 0 60px;font-family:var(--mono);font-size:12px;color:var(--dimmer);line-height:1.8;border-top:1px solid var(--border);padding-top:22px;}
.blog-foot a{color:var(--dim);border-bottom:1px dotted var(--border-2);}
.blog-foot a:hover{color:var(--pink);}

/* ---- article ---- */
article.post{margin-top:40px;}
.post-head .kicker{font-family:var(--mono);font-size:12px;color:var(--pink);letter-spacing:.04em;}
.post-head h1{font-family:var(--display);font-size:clamp(30px,5.4vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin-top:12px;}
.post-head .byline{font-family:var(--mono);font-size:12.5px;color:var(--dimmer);margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.post-head .byline .dot{color:var(--border-2);}
.post-head .lede{margin-top:24px;font-size:19px;line-height:1.6;color:var(--text);font-weight:450;}

.post-body{margin-top:8px;}
.post-body h2{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:44px 0 4px;scroll-margin-top:24px;}
.post-body h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:30px 0 2px;color:var(--text);}
.post-body p{margin-top:16px;color:var(--text);}
.post-body p.dim{color:var(--dim);}
.post-body a.ln{color:var(--pink);border-bottom:1px solid rgba(255,45,120,.35);transition:border-color .15s;}
.post-body a.ln:hover{border-color:var(--pink);}
.post-body ul,.post-body ol{margin:16px 0 16px 4px;padding-left:22px;color:var(--text);}
.post-body li{margin-top:9px;}
.post-body li::marker{color:var(--pink);}
.post-body strong{color:var(--text);font-weight:600;}
.post-body em{color:var(--dim);}

/* answer-first callout box — the AEO-friendly definition block */
.answer-box{margin:22px 0;border:1px solid var(--border);border-left:3px solid var(--pink);border-radius:10px;background:var(--surface);padding:18px 20px;}
.answer-box .albl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--pink);margin-bottom:8px;}
.answer-box p{margin:0;font-size:16px;line-height:1.6;color:var(--text);}

/* comparison table */
.tbl-wrap{margin:24px 0;overflow-x:auto;border:1px solid var(--border);border-radius:10px;-webkit-overflow-scrolling:touch;}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;}
table.cmp th,table.cmp td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--border);}
table.cmp thead th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);background:var(--bg-soft);font-weight:600;}
table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp td.tool{font-weight:600;color:var(--text);}
table.cmp td .yes{color:var(--green);font-weight:600;}
table.cmp td .no{color:var(--dimmer);}
table.cmp tr.mine td{background:rgba(255,45,120,.06);}
table.cmp tr.mine td.tool{color:var(--pink);}

/* CTA to tool */
.tool-cta{margin:32px 0;border:1px solid var(--pink);border-radius:12px;background:linear-gradient(180deg,rgba(255,45,120,.06),rgba(255,45,120,.02));padding:22px 24px;}
.tool-cta .ctitle{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;}
.tool-cta .cdesc{color:var(--dim);font-size:14.5px;margin-top:7px;line-height:1.6;}
.tool-cta a.cbtn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--pink);color:#0b0b0d;font-family:var(--mono);font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:8px;transition:filter .15s;text-transform:uppercase;letter-spacing:.04em;}
.tool-cta a.cbtn:hover{filter:brightness(1.08);}

/* FAQ block (also emitted as schema) */
.faq{margin-top:16px;}
.faq details{border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-bottom:10px;overflow:hidden;}
.faq summary{cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--pink);font-size:20px;flex-shrink:0;}
.faq details[open] summary::after{content:"−";}
.faq details p{padding:0 20px 18px;color:var(--dim);font-size:15px;line-height:1.6;margin:0;}

.post-nav{margin:48px 0 20px;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:13px;}
.post-nav a{color:var(--pink);}
.post-nav a:hover{text-decoration:underline;}

.author-card{margin:40px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:22px 24px;font-size:14.5px;color:var(--dim);line-height:1.7;}
.author-card b{color:var(--text);font-weight:600;}
.author-card a{color:var(--pink);border-bottom:1px dotted rgba(255,45,120,.4);}

@media(max-width:560px){
  body{font-size:15.5px;}
  .wrap{padding:0 18px;}
  .post-body h2{font-size:23px;}
  .post-head .lede{font-size:17px;}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}