/* Blog — matches OwnDP/index.html landing tokens & chrome */
:root {
--bg-deep: #070a12;
--bg: #0c1018;
--bg-card: rgba(18, 22, 34, 0.72);
--bg-card-hover: rgba(28, 32, 48, 0.85);
--bg-elevated: rgba(255, 255, 255, 0.04);
--text: #fafafa;
--text-muted: #a1a1aa;
--border: rgba(255, 255, 255, 0.08);
--accent: #6366f1;
--accent-hover: #818cf8;
--accent-soft: rgba(99, 102, 241, 0.18);
--teal: #2dd4bf;
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.45);
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--hero-h1-size: clamp(2.5rem, 6.75vw, 4.5rem);
--logo-header-layout-height: 3.35rem;
--logo-header-scale: 2.1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.blog-page {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: var(--text);
background: var(--bg-deep);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
position: relative;
}
body.blog-page::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 120% 70% at 50% -25%, rgba(99, 102, 241, 0.28), transparent 55%),
radial-gradient(ellipse 80% 50% at 95% 35%, rgba(45, 212, 191, 0.09), transparent 50%),
radial-gradient(ellipse 70% 45% at 5% 85%, rgba(99, 102, 241, 0.12), transparent 50%),
var(--bg-deep);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.blog-main {
padding: 6rem 0 3rem;
}
/* Reading column: centered under nav (matches hero feel on landing) */
.blog-main .full-blog-post {
max-width: min(47.5rem, 100%);
margin-left: auto;
margin-right: auto;
}
/* Site chrome only — NOT article