/* posts.css — only what "answer pages" need and the shared blog stylesheet does not have.
   Everything else reuses assets/style.css, so the visual language stays identical to the
   foundational posts and the analytical series. Kept deliberately tiny: fewer rules to
   maintain after handover. */

.answer-box{margin:0 0 1.6em}
.answer-box strong{color:var(--accent-deep)}

/* style.css styles every link inside .article with
   ".article a:not(.pill):not(.nav-cta)" (specificity 0,3,1), which beats a plain
   ".cta a" and paints the CTA button dark on a dark gradient. Match that specificity. */
.article .cta a:not(.pill):not(.nav-cta){color:#fff;text-decoration:none}
.article .cta a:not(.pill):not(.nav-cta):hover{color:#fff}

.facts{margin:1.2em 0 1.8em}
.facts table{width:100%;border-collapse:collapse;font-size:.97rem}
.facts th,.facts td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}
.facts th{font-family:var(--font-ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}

.table-wrap{overflow-x:auto;margin:1.6em 0}

/* ---- answer index on the blog home ---- */
.q-index{margin-top:2.6em;padding-top:1.8em;border-top:1px dashed var(--line)}
.q-index-h{font-family:var(--font-serif);font-size:1.6rem;margin:0 0 8px;color:var(--ink)}
.q-index-dek{margin:0 0 22px;color:var(--muted);max-width:640px}
.q-groups{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.q-group h3{font-family:var(--font-ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 10px;font-weight:800}
.q-group ul{list-style:none;margin:0;padding:0}
.q-group li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.q-group li a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem}
.q-group li a:hover{color:var(--accent-deep);text-decoration:underline}
.q-mins{flex:0 0 auto;font-size:.8rem;color:var(--muted);font-family:var(--font-ui)}

.related{margin-top:2.6em;padding-top:1.6em;border-top:1px dashed var(--line)}
.related h2{font-family:var(--font-ui);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 14px;font-weight:800}
.related h2::after{display:none}
.related-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.related-grid .mini-card{display:block;text-decoration:none;color:inherit;transition:transform .15s ease}
.related-grid .mini-card:hover{transform:translateY(-2px)}
.related-grid .mini-card h3{text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink);margin:0 0 8px}
.related-grid .mini-card .go{font-family:var(--font-ui);font-size:.85rem;font-weight:800;color:var(--accent)}

@media (max-width:640px){
  .facts table{font-size:.92rem}
  .related-grid{grid-template-columns:1fr}
}