/* Atlas & Arbor blog styles. Builds on site.css tokens. */

/* ---------- article ---------- */
.post-hero{padding-top:148px;padding-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.post-hero .crumbs a{text-decoration:none}
.post-title{font-weight:850;font-size:clamp(30px,4.6vw,62px);line-height:1.04;text-transform:none;max-width:24ch;letter-spacing:-.015em}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

.post-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(0,340px);gap:clamp(32px,7vw,112px);padding-block:clamp(40px,6vw,88px);align-items:start}
@media (max-width:980px){.post-layout{grid-template-columns:1fr}}

.post-body{font-size:18px;line-height:1.7}
.post-body p{margin:0 0 20px;color:#CFCAC0}
.post-body p.answer{font-size:clamp(19px,2.2vw,22px);line-height:1.55;color:var(--bone);border-left:3px solid var(--flag);padding:4px 0 4px 20px;margin-bottom:34px}
.post-body h2{font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.1;text-transform:none;margin:40px 0 14px;letter-spacing:-.01em}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:1.2em;color:#CFCAC0}
.post-body li{margin-bottom:9px;padding-left:4px}
.post-body li::marker{color:var(--flag)}
.post-body strong{color:var(--bone);font-weight:600}
.post-body a{color:var(--flag);text-decoration:underline;text-decoration-color:rgba(230,163,58,.4);text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--flag)}

.post-cta{margin-top:48px;padding:28px 28px 30px;background:var(--ground-2);border:1px solid var(--line);border-radius:6px}
.post-body .post-cta h2{margin:0 0 10px;font-size:24px}
.post-body .post-cta p{margin-bottom:18px}
.post-cta .btn{color:var(--ground)!important;text-decoration:none}
.post-body .post-updated{margin:26px 0 0}

.post-aside{position:sticky;top:96px}
@media (max-width:980px){.post-aside{position:static}}
.aside-card{background:var(--ground-2);border:1px solid var(--line);border-radius:6px;padding:28px}
.aside-card h2{font-size:24px;font-weight:800;text-transform:none;line-height:1.1;margin:10px 0 12px}
.aside-card p{color:var(--muted);font-size:15px;margin:0 0 20px}
.aside-card .aside-phone{margin:18px 0 0;font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.aside-card .aside-phone a{text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- cards (hub + related) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:background .35s;min-height:240px}
.card:hover{background:var(--ground-3)}
.card[hidden]{display:none}
.card h3{font-size:22px;line-height:1.1;font-weight:800;text-transform:none;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:15px;flex:1}
.card .card-meta{color:var(--flag)}
.cards-hub{margin-top:28px}

.chips-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:none;color:var(--bone);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--flag)}
.chip.on{background:var(--flag);color:var(--ground);border-color:var(--flag)}

.related{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
.related .mono{margin-bottom:22px}
.back-hub{margin:28px 0 0}