/* Shared styles for Strondex static blog pages (brand-matched, Direction 2B). */
:root { --navy:#0F172A; --navy-2:#1E293B; --accent:#3B82F6; --accent-hover:#2563EB; --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --hairline:#E2E8F0; --surface:#fff; --page:#F8FAFC; --crit:#DC2626; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:'DM Sans',sans-serif; letter-spacing:-0.02em; color:var(--navy); line-height:1.2; }

.topbar { background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08); }
.topbar-inner { max-width:760px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.topbar img { height:28px; width:auto; display:block; }
.topbar a.nav { color:rgba(255,255,255,.75); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; margin-left:20px; }
.topbar a.nav:hover { color:#fff; text-decoration:none; }

.article { max-width:760px; margin:0 auto; padding:48px 24px 24px; }
.eyebrow { font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.article h1 { font-size:clamp(1.9rem,4.5vw,2.6rem); margin:0 0 14px; color:var(--navy); }
.article .meta { color:var(--ink-faint); font-size:14px; margin:0 0 28px; }
.article .lead { font-size:20px; line-height:1.55; color:var(--ink-soft); margin:0 0 28px; }
.article h2 { font-size:1.45rem; margin:38px 0 12px; }
.article p { margin:0 0 18px; }
.article ul { margin:0 0 18px; padding-left:22px; }
.article li { margin-bottom:8px; }
.article blockquote { border-left:3px solid var(--accent); background:#fff; margin:24px 0; padding:14px 20px; color:var(--ink-soft); border-radius:0 8px 8px 0; }
hr { border:none; border-top:1px solid var(--hairline); margin:36px 0; }

.cta-box { background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff; border-radius:16px; padding:32px; margin:36px 0; }
.cta-box h3 { color:#fff; font-size:1.3rem; margin:0 0 10px; }
.cta-box p { color:#CBD5E1; font-size:16px; margin:0 0 20px; }
.cta-box .btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; font-family:'DM Sans',sans-serif; font-weight:600; font-size:15.5px; border-radius:10px; padding:13px 24px; cursor:pointer; border:none; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 6px 16px -4px rgba(59,130,246,.5); }
.btn-primary:hover { background:var(--accent-hover); text-decoration:none; }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background:rgba(255,255,255,.1); text-decoration:none; }

.sources { font-size:14.5px; color:var(--ink-soft); }
.sources h2 { font-size:1.1rem; }
.sources ol { padding-left:20px; } .sources li { margin-bottom:6px; word-break:break-word; }
.disclaimer { font-size:13px; color:var(--ink-faint); margin-top:8px; }

/* Blog index */
.index-head { max-width:760px; margin:0 auto; padding:52px 24px 8px; }
.index-head h1 { font-size:clamp(2rem,5vw,2.8rem); margin:0 0 10px; }
.index-head p { color:var(--ink-soft); font-size:18px; margin:0; max-width:600px; }
.posts { max-width:760px; margin:0 auto; padding:24px 24px 16px; }
.post-card { display:block; background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:24px 26px; margin-bottom:18px; transition:border-color .15s, transform .15s; }
.post-card:hover { border-color:var(--accent); transform:translateY(-2px); text-decoration:none; }
.post-card .eyebrow { margin-bottom:8px; }
.post-card h2 { font-size:1.35rem; margin:0 0 8px; color:var(--navy); }
.post-card p { color:var(--ink-soft); font-size:15.5px; margin:0; }
.post-card .date { color:var(--ink-faint); font-size:13px; margin-top:10px; }

footer { background:var(--navy); color:rgba(255,255,255,.7); margin-top:48px; }
.footer-inner { max-width:760px; margin:0 auto; padding:28px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13.5px; }
.footer-inner a { color:rgba(255,255,255,.7); } .footer-inner a:hover { color:#fff; text-decoration:none; }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }

@media (max-width:600px){ .article{padding-top:32px;} body{font-size:16px;} .footer-inner{flex-direction:column;align-items:flex-start;} }