.blog-header {
   background: var(--darkness);
   border-bottom: 1px solid var(--border);
   padding: var(--space-4) 0 var(--space-3);
   text-align: center;
   position: relative;
}

.blog-title {
   font-size: var(--text-2xl);
   font-family: var(--font-heading);
   margin: var(--space-12) 0 0 0;
   text-align: center;
}

.blog-meta {
   display: flex;
   justify-content: center;
   gap: var(--space-4);
   flex-wrap: wrap;
}

.blog-date,
.blog-tags {
   font-family: var(--font-body);
   font-size: var(--text-sm);
   color: var(--text-faint);
   font-weight: 400;
}

.tag {
   margin-right: var(--space-1);
}

.blog-content {
   max-width: 1100px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 0.65fr 0.35fr;
   gap: 0 3rem;
   align-items: start;
   margin-top: 4rem;
}

.footnote {
   max-width: 1100px;
   margin: 0 auto;
   font-size: var(--text-sm);
   opacity: 0.8;
}

.blog-content h1,
h2,
h3,
h4,
h5,
h6,
div,
pre,
p:not(.annotation) {
   grid-column: 1;
}

.blog-content .sidenote {
   grid-column: 2;
   font-size: 0.9rem;
}

.blog-content .comment {
   border-left: 1px solid var(--border);
   padding-left: var(--space-2);
   font-style: italic;
   opacity: 0.7;
   font-size: 0.85rem;
}

.blog-content .annotation {
   border-left: 3px solid var(--text-faint);
   padding-left: var(--space-2);
   background: rgba(255, 255, 255, 0.02);
   padding: var(--space-1) var(--space-2);
   font-size: 0.85rem;
}

.blog-content .warning {
   border-left: 2px solid #ff6b6b;
   padding-left: var(--space-2);
   font-weight: 500;
   letter-spacing: 0.01em;
   font-size: 0.85rem;
}

.blog-content p {
   margin: var(--space-1), 0;
   font-size: var(--text-base);
}

.blog-content a {
   color: var(--accent-dim);
   font-weight: 400;
   border-bottom: 1px solid var(--border);
}

.blog-content a:hover {
   color: var(--accent);
   border-bottom-color: var(--accent);
}