/* Generated by SEOWizard. */
.blog-hero { padding: 92px 0 36px; }
.blog-kicker { color: var(--ink-faint); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.blog-title { max-width: 900px; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1.04; letter-spacing: -0.045em; }
.blog-description { max-width: 720px; margin-top: 22px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.75; }
.blog-layout { padding: 48px 0 110px; }
.article-shell { max-width: 850px; margin: 0 auto; padding: 42px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.article-shell h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 22px; }
.article-shell h2 { margin-top: 42px; margin-bottom: 14px; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.18; letter-spacing: -0.025em; }
.article-shell h3 { margin-top: 28px; margin-bottom: 10px; font-size: 1.2rem; }
.article-shell p, .article-shell li { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.78; }
.article-shell p + p { margin-top: 18px; }
.article-shell ul, .article-shell ol { margin: 18px 0 0 24px; }
.article-shell table { width: 100%; border-collapse: collapse; margin: 28px 0; overflow: hidden; border-radius: var(--radius-sm); }
.article-shell th, .article-shell td { border: 1px solid var(--line); padding: 13px; text-align: left; vertical-align: top; }
.article-featured { margin: 0 0 34px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-muted); }
.article-featured img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-cta { margin-top: 48px; padding: 28px; border-radius: var(--radius-md); background: var(--surface-muted); border: 1px solid var(--line); }
.article-cta h2 { margin-top: 0; }
.article-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.article-related ul { margin-top: 14px; }
.blog-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding-bottom: 110px; }
.blog-card { display: block; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-solid); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 16px; background: var(--surface-muted); }
.blog-card span { color: var(--ink-faint); font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.blog-card strong { display: block; margin-top: 12px; font-size: 1.25rem; line-height: 1.22; }
@media (max-width: 720px) { .article-shell { padding: 26px; } .blog-hero { padding-top: 64px; } }

/* SEOWIZARD_MEDIA_V2 */
.article-featured, .blog-card-media { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, var(--surface-muted), color-mix(in srgb, var(--accent) 14%, var(--surface-solid))); }
.article-featured { aspect-ratio: 16 / 9; }
.article-featured img, .blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-media { width: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--radius-md) - 8px); }
.media-fallback-visible::after { content: ""; position: absolute; inset: 24%; border-radius: 28%; background: var(--accent); opacity: .12; box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 7%, transparent); }
.blog-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: clamp(18px, 2.4vw, 30px); align-items: stretch; }
.blog-card { display: flex; min-width: 0; flex-direction: column; padding: 12px; text-decoration: none; overflow: hidden; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 10px 10px; }
.blog-card-body strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.blog-card-body p { color: var(--ink-soft); line-height: 1.55; margin: 12px 0 18px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.blog-card-body small { color: var(--ink-faint); margin-top: auto; padding-top: 12px; }
.blog-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.article-inline-image { margin: 32px 0; }
.article-inline-image img { display: block; width: 100%; height: auto; max-height: 760px; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-muted); }
@media (max-width: 720px) { .blog-card-grid { grid-template-columns: 1fr; } .blog-card { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .blog-card { transition: none; } }
