/* ============================================================
   Brainspill blog — article + listing styles.
   Inherits tokens/components from /style.css.
   ============================================================ */

/* ---------- Draft ribbon (REMOVE AT PUBLISH along with <meta name="robots" content="noindex">) ---------- */
.draft-ribbon{
  position:sticky;top:0;z-index:60;
  background:var(--orange);color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  text-align:center;padding:9px 16px;
}
.draft-ribbon b{font-weight:700}

/* ---------- Pending-verification highlight ---------- */
mark.v{
  background:color-mix(in srgb, var(--orange) 22%, transparent);
  color:inherit;border-radius:4px;padding:0 3px;
  border-bottom:1.5px dashed var(--orange);
  cursor:help;
}

/* ---------- Post layout ---------- */
.post-page{padding-block:clamp(48px,7vw,90px)}
.post{max-width:720px;margin-inline:auto;padding-inline:var(--gut)}
.post-title{
  font-family:var(--serif);font-weight:430;line-height:1.08;
  font-size:clamp(2.1rem,4.8vw,3.2rem);letter-spacing:-.02em;margin:10px 0 18px;
}
.post-meta{font-size:14.5px;color:var(--ink-3);margin:0 0 34px;line-height:1.6}
.post-meta a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.post-answer{
  background:var(--accent-tint);border:1px solid var(--hair);
  border-radius:16px;padding:22px 24px;margin:0 0 18px;
  font-size:clamp(1.06rem,1.5vw,1.18rem);line-height:1.6;
}
.post-answer b,.post-answer strong{font-weight:600}

.post-disclosure{
  font-size:14px;color:var(--ink-3);font-style:italic;
  border-left:3px solid var(--hair-2);padding-left:14px;margin:0 0 40px;line-height:1.55;
}

.post h2{
  font-family:var(--serif);font-weight:440;line-height:1.12;
  font-size:clamp(1.55rem,2.8vw,2.05rem);letter-spacing:-.016em;
  margin:52px 0 16px;
}
.post h3{
  font-family:var(--serif);font-weight:460;line-height:1.18;
  font-size:clamp(1.22rem,2vw,1.5rem);margin:36px 0 12px;
}
.post p{margin:0 0 18px}
.post ul,.post ol{margin:0 0 18px;padding-left:24px}
.post li{margin-bottom:10px}
.post a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post a:hover{color:var(--hl)}
.post strong{font-weight:600}

/* ---------- Comparison tables ---------- */
.table-scroll{overflow-x:auto;margin:26px 0 34px;border:1px solid var(--hair);border-radius:14px;background:var(--surface)}
.post table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px;line-height:1.45}
.post th,.post td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
.post th{font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);background:var(--bg-2)}
.post tr:last-child td{border-bottom:none}
.post td b{font-weight:600}

/* ---------- FAQ reuse (site .qa styles) ---------- */
.post-faq{margin-top:56px}

/* ---------- CTA block ---------- */
.post-cta{
  margin:60px 0 0;padding:34px 28px;text-align:center;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:20px;
}
.post-cta .h3{margin-bottom:8px}
.post-cta p{color:var(--ink-2);max-width:44ch;margin:0 auto 20px}

/* ---------- Related links ---------- */
.post-related{margin-top:44px;padding-top:26px;border-top:1px solid var(--hair)}
.post-related p{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.post-related a{display:block;margin-bottom:8px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- Blog index ---------- */
.blog-head{text-align:center;max-width:640px;margin:0 auto clamp(40px,6vw,70px);padding-inline:var(--gut)}
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
.bcard{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .2s ease;
}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bcard .eyebrow{margin:0;font-size:12px}
.bcard h2{font-family:var(--serif);font-weight:450;font-size:1.35rem;line-height:1.2;margin:0}
.bcard p{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0;flex-grow:1}
.bcard .b-draft{
  align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);border:1.5px solid var(--orange);border-radius:999px;padding:3px 10px;
}