/* Shared blog styles. Every post under /blog links this file. */
/* palette matches the homepage brand (porcelain / ink / Ferrari red). --signal-deep is the
   link colour: plain --signal fails 4.5:1 contrast for body text on porcelain. */
:root { --ink:#13151B; --ink-soft:#3A3D47; --ink-muted:#6B7180; --paper:#EEF1F6; --paper-2:#E6EAF1; --paper-3:#D6DCE6; --signal:#FF2400; --signal-2:#FF5630; --signal-deep:#D41D00; --cobalt:#1B3CFF; --r:12px; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; font-size:17px; line-height:1.7; }
a { color:var(--signal-deep); text-decoration:none; } a:hover { text-decoration:underline; }
.container { max-width:700px; margin:0 auto; padding:0 1.25rem; }

/* nav */
.nav { position:sticky; top:0; z-index:100; background:rgba(238,241,246,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--paper-3); }
.nav-inner { max-width:1180px; margin:0 auto; padding:0 1.25rem; height:60px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo { display:flex; align-items:center; gap:10px; font-family:'Syne',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:-0.03em; color:var(--ink); }
.nav-logo:hover { text-decoration:none; }
.nav-links { display:flex; align-items:center; gap:1.25rem; }
.nav-links a { font-size:0.875rem; font-weight:500; color:var(--ink-muted); }
.nav-links a:hover { color:var(--ink); text-decoration:none; }
.btn-nav-cta { display:inline-flex; align-items:center; padding:0.6rem 1.2rem; background:var(--signal); color:white !important; border-radius:100px; font-size:0.875rem; font-weight:500; white-space:nowrap; }

/* article */
article { padding:3rem 0 4rem; }
.post-meta { font-size:0.8rem; color:var(--ink-muted); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:1rem; }
article h1 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.9rem,5vw,2.8rem); letter-spacing:-0.03em; line-height:1.08; margin-bottom:1.25rem; color:var(--ink); }
article h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:-0.02em; line-height:1.25; margin:2.5rem 0 0.85rem; color:var(--ink); }
article h3 { font-weight:600; font-size:1.1rem; color:var(--ink); margin:1.75rem 0 0.5rem; }
article p { margin-bottom:1.2rem; color:var(--ink-soft); }
article ul, article ol { margin:0 0 1.25rem 1.25rem; color:var(--ink-soft); }
article li { margin-bottom:0.5rem; }
article strong { color:var(--ink); }
article blockquote { border-left:3px solid var(--signal); padding:0.25rem 0 0.25rem 1.1rem; margin:1.5rem 0; font-family:'Instrument Serif',serif; font-size:1.3rem; line-height:1.45; color:var(--ink); }
article blockquote cite { display:block; margin-top:0.4rem; font-family:'DM Sans',system-ui,sans-serif; font-size:0.85rem; font-style:normal; color:var(--ink-muted); }
.lede { font-size:1.2rem; color:var(--ink-muted); line-height:1.6; margin-bottom:1.75rem; font-family:'Instrument Serif',serif; font-style:italic; }

/* byline */
.byline { display:flex; align-items:center; gap:0.75rem; margin-bottom:2rem; font-size:0.9rem; color:var(--ink-muted); }
.byline img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.byline strong { color:var(--ink); font-weight:600; }

/* quick answer box: the first thing answer engines quote */
.answer { background:#fff; border-left:3px solid var(--signal); border-radius:0 var(--r) var(--r) 0; padding:1.1rem 1.25rem; margin:0 0 2rem; }
.answer-label { font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--signal-deep); margin-bottom:0.35rem; }
.answer p { margin:0; color:var(--ink); }

/* tables */
.table-wrap { overflow-x:auto; margin:1.5rem 0 2rem; -webkit-overflow-scrolling:touch; }
table.cmp { width:100%; border-collapse:collapse; font-size:0.93rem; min-width:520px; }
table.cmp th, table.cmp td { text-align:left; vertical-align:top; padding:0.8rem 0.9rem; border-bottom:1px solid var(--paper-3); }
table.cmp th { font-family:'Syne',sans-serif; font-weight:700; color:var(--ink); background:var(--paper-2); }
table.cmp td { color:var(--ink-soft); }
table.cmp td:first-child { font-weight:600; color:var(--ink); }

/* faq */
.faq { margin-top:1rem; border-top:1px solid var(--paper-3); }
.faq details { border-bottom:1px solid var(--paper-3); padding:0.9rem 0; }
.faq summary { cursor:pointer; font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--signal-deep); font-weight:700; }
.faq details[open] summary::after { content:'\2212'; }
.faq details p { margin:0.6rem 0 0; }

/* sources */
.sources { margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--paper-3); font-size:0.85rem; color:var(--ink-muted); }
.sources h2 { font-family:'DM Sans',system-ui,sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 0.6rem; }
.sources ol { margin-left:1.1rem; color:var(--ink-muted); }
.sources li { margin-bottom:0.35rem; }

/* author box */
.author-box { display:flex; gap:1rem; align-items:flex-start; margin:3rem 0 0; padding:1.25rem; background:#fff; border-radius:16px; }
.author-box img { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-box p { margin:0; font-size:0.92rem; }
.author-box .name { font-weight:600; color:var(--ink); margin-bottom:0.2rem; }

/* related + cta */
.related { margin-top:2.5rem; }
.related h2 { font-size:1.1rem; margin:0 0 0.6rem; }
.related ul { list-style:none; margin:0; }
.related li { margin:0 0 0.4rem; }
.cta-box { margin:3rem 0 0; padding:2rem 1.5rem; background:var(--ink); border-radius:16px; text-align:center; }
.cta-box h2 { font-family:'Syne',sans-serif; font-weight:800; color:white; font-size:1.4rem; margin:0 0 0.5rem; letter-spacing:-0.02em; }
.cta-box p { color:rgba(255,255,255,0.6); margin-bottom:1.4rem; font-size:0.95rem; }
.cta-box a { display:inline-block; padding:0.85rem 1.75rem; background:var(--signal); color:white !important; border-radius:100px; font-weight:600; font-size:0.95rem; }
.cta-box a:hover { background:var(--signal-2); text-decoration:none; }
.back { display:inline-block; margin-top:2.5rem; font-size:0.9rem; color:var(--ink-muted); }
.footer-base { background:var(--ink); padding:1.5rem; text-align:center; font-size:0.78rem; color:rgba(255,255,255,0.35); }
.footer-base a { color:rgba(255,255,255,0.5); }

/* blog index */
.blog-head { padding:3.5rem 0 1.5rem; }
.blog-head h1 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.2rem,6vw,3.2rem); letter-spacing:-0.03em; line-height:1.05; margin-bottom:0.75rem; }
.blog-head p { color:var(--ink-muted); }
.post-list { display:flex; flex-direction:column; margin:1rem 0 4rem; border-top:1px solid var(--paper-3); }
.post-link { padding:1.6rem 0.25rem; border-bottom:1px solid var(--paper-3); display:block; color:var(--ink); }
.post-link:hover { background:var(--paper-2); text-decoration:none; }
.post-link .post-meta { margin-bottom:0.4rem; }
.post-link h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:1.3rem; letter-spacing:-0.02em; line-height:1.25; margin-bottom:0.4rem; color:var(--ink); }
.post-link:hover h2 { color:var(--signal-deep); }
.post-link p { font-size:0.93rem; color:var(--ink-muted); line-height:1.6; }

@media (max-width:520px) {
  body { font-size:16px; }
  .nav-links a:not(.btn-nav-cta) { display:none; }
  .author-box { flex-direction:column; }
}