/* Blog styles — extends the shared compare design system */
@import url('../compare/styles.css');

/* Article layout */
.mk-article{max-width:768px;margin:0 auto;padding:0 1.5rem 4rem;overflow-x:hidden}
.mk-article header{text-align:center;padding:3rem 0 2rem}
.mk-article h1{font-size:2.25rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:1rem;line-height:1.15}
@media(min-width:768px){.mk-article h1{font-size:2.75rem}}
.mk-article-meta{font-size:0.875rem;color:var(--muted-fg);margin-bottom:0;display:flex;align-items:center;justify-content:center;gap:0.5rem;flex-wrap:wrap}
.mk-article-meta time{font-weight:500}
.mk-article-meta .mk-read-time{opacity:0.7}
.mk-article-meta .mk-meta-sep{opacity:0.35}

/* Author byline */
.mk-author{display:flex;align-items:center;justify-content:center;gap:0.625rem;margin-top:1rem}
.mk-author-photo{width:36px;height:36px;border-radius:9999px;object-fit:cover;flex-shrink:0}
.mk-author-info{display:flex;flex-direction:column;text-align:left;line-height:1.3;gap:0.2rem}
.mk-author-name{font-size:0.875rem;font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;transition:color 0.2s}
.mk-author-name:hover{color:var(--accent)}
.mk-author-role{font-size:0.75rem;color:var(--muted-fg)}

/* Reading progress bar */
.mk-progress{position:fixed;top:0;left:0;width:0;height:3px;background:var(--accent);z-index:100;transition:width 0.1s linear;pointer-events:none}

/* Prose */
.mk-prose h2{font-family:'Urbanist',ui-sans-serif,system-ui,sans-serif;font-size:1.375rem;font-weight:700;letter-spacing:-0.01em;margin:2.5rem 0 0.75rem;line-height:1.2}
.mk-prose h3{font-family:'Urbanist',ui-sans-serif,system-ui,sans-serif;font-size:1.125rem;font-weight:600;margin:2rem 0 0.5rem;line-height:1.3}
.mk-prose p{color:var(--muted-fg);line-height:1.75;margin-bottom:1.25rem;font-size:0.9375rem}
.mk-prose ul,.mk-prose ol{color:var(--muted-fg);font-size:0.9375rem;line-height:1.75;margin-bottom:1.25rem;padding-left:1.5rem}
.mk-prose li{margin-bottom:0.375rem}
.mk-prose strong{color:var(--fg);font-weight:600}
.mk-prose a{color:var(--fg);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;transition:color 0.2s}
.mk-prose a:hover{color:var(--accent)}
.mk-prose code{font-size:0.8125rem;background:var(--muted);padding:0.125rem 0.375rem;border-radius:4px;font-family:'SF Mono',SFMono-Regular,ui-monospace,monospace}
.mk-prose blockquote{border-left:3px solid var(--accent);padding:0.75rem 1rem;margin:1.5rem 0;background:var(--muted);border-radius:0 var(--radius) var(--radius) 0}
.mk-prose blockquote p{margin-bottom:0;color:var(--fg)}

/* Figures & tables */
.mk-prose figure{margin:2rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mk-prose figcaption{font-size:0.8125rem;color:var(--muted-fg);text-align:center;margin-top:0.5rem}
.mk-prose pre{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--muted);padding:1rem;border-radius:var(--radius);margin-bottom:1.5rem}
.mk-prose pre code{background:none;padding:0;font-size:0.8125rem;white-space:pre}
.mk-prose table{width:100%;font-size:0.875rem;border-collapse:separate;border-spacing:0;margin-bottom:1.5rem;min-width:480px}
.mk-prose th,.mk-prose td{padding:0.75rem 1rem;border-bottom:1px solid var(--border);text-align:left}
.mk-prose th{font-weight:600;color:var(--fg);background:var(--muted)}
.mk-prose td{color:var(--muted-fg)}
.mk-prose tbody tr:hover{background:color-mix(in srgb,var(--muted) 30%,transparent)}

/* Key takeaway box */
.mk-takeaway{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:2rem 0}
.mk-takeaway p{margin-bottom:0}
.mk-takeaway strong{color:var(--accent)}

/* Related posts */
.mk-related{padding:2rem 0 0;border-top:1px solid var(--border);margin-top:3rem}
.mk-related-title{font-size:0.9375rem;font-weight:600;color:var(--fg);margin-bottom:0.75rem}
.mk-related-list{display:flex;flex-direction:column;gap:0.5rem;list-style:none;padding:0;margin:0}
.mk-related-list a{display:inline-block;font-size:0.9375rem;color:var(--fg);text-decoration:none;transition:color 0.2s}
.mk-related-list a::before{content:'–\00a0';color:var(--muted-fg)}
.mk-related-list a span{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.mk-related-list a:hover span{color:var(--accent)}