/* Shared by public/blog/index.html and public/blog/post.html. */
.blog-meta { color: rgba(255,255,255,.5); }
.blog-meta-sep { opacity: .4; margin: 0 .5rem; }

/* ── Blog index — matches the post page's terminal-margin-note world:
   mono metadata, dashed rules, no card wrappers. Each row uses the same
   three-column page grid as the post page: date hangs in the left page
   margin, title/excerpt sits in the centered column that lines up with
   the article body on post.html. ───────────────────────────────────── */
.blog-index-wrap { max-width: 74rem; margin: 0 auto; }
.blog-index-intro { display: grid; grid-template-columns: 11rem 1fr 11rem; gap: 2.5rem; }
.blog-index-intro > .blog-index-body { grid-column: 2; min-width: 0; }
.blog-index-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
    color: #c4b5fd; margin-bottom: .75rem; display: block;
}

.blog-featured {
    display: grid;
    grid-template-columns: 11rem 1fr 11rem;
    gap: 2.5rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px dashed rgba(255,255,255,.14);
}
.blog-featured > * { grid-column: 2; min-width: 0; }
.blog-featured .blog-meta {
    grid-column: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem; color: rgba(255,255,255,.52); line-height: 1.7; padding-top: .3rem;
}
.blog-featured h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.2; transition: color .2s var(--ease); }
.blog-featured:hover h2 { color: #c7d2fe; }

.blog-list { border-top: 1px solid rgba(255,255,255,0.09); }
.blog-row {
    display: grid;
    grid-template-columns: 11rem 1fr 11rem;
    gap: 2.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    text-decoration: none;
    color: inherit;
}
.blog-row > * { grid-column: 2; min-width: 0; }
.blog-row:hover .blog-row-title { color: #c7d2fe; }
.blog-row-date {
    grid-column: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: rgba(255,255,255,.52); font-size: .72rem; line-height: 1.7; padding-top: .2rem;
}
.blog-row-title {
    font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em;
    margin-bottom: .4rem; transition: color .2s var(--ease);
}
.blog-row-excerpt { color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1.55; max-width: 62ch; }

@media (max-width: 820px) {
    .blog-index-intro { grid-template-columns: minmax(0, 1fr); }
    .blog-index-intro > .blog-index-body { grid-column: 1; }
    .blog-featured, .blog-row { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; }
    .blog-featured > *, .blog-row > * { grid-column: 2; }
    .blog-featured .blog-meta, .blog-row-date { grid-column: 1; }
}
@media (max-width: 576px) {
    .blog-row, .blog-featured { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .blog-featured > *, .blog-row > *,
    .blog-featured .blog-meta, .blog-row-date { grid-column: 1; }
}

/* ── Blog post — "terminal margin note": RFC-style margin column with
   running metadata, no card wrapper around the article. ──────────────── */
.blog-post-wrap { max-width: 74rem; margin: 0 auto; }
.blog-back {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .78rem; color: rgba(255,255,255,.55); text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 3rem;
    transition: color .2s var(--ease);
}
.blog-back:hover { color: #fff; }

/* Middle column is symmetric (mirrors the margin column's width) so the
   article centers on the page, with the metadata rail hanging off its
   left edge rather than being part of what gets centered. */
.blog-post-grid { display: grid; grid-template-columns: 11rem 1fr 11rem; gap: 2.5rem; }
.blog-post-grid > .blog-post-body { grid-column: 2; min-width: 0; }
.blog-margin {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem; color: rgba(255,255,255,.52); line-height: 1.8;
}
.blog-margin dt {
    text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255,255,255,.52); opacity: .6; margin-top: 1.25rem;
}
.blog-margin dt:first-child { margin-top: 0; }
.blog-margin dd { margin: .2rem 0 0; color: #c4b5fd; }
.blog-margin .blog-tags-list dd { display: block; color: rgba(255,255,255,.72); }

.blog-post-title {
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); font-weight: 800;
    letter-spacing: -.025em; line-height: 1.12; margin: 0 0 2rem;
}
.blog-post-rule { height: 1px; background: rgba(255,255,255,.09); margin-bottom: 2.25rem; }

@media (max-width: 820px) {
    .blog-post-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-post-grid > .blog-post-body { grid-column: 1; }
    .blog-margin { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
    .blog-margin dt { flex-basis: 100%; margin-top: .9rem; }
    .blog-margin dt:first-child { margin-top: 0; }
    .blog-margin .blog-tags-list ~ dd { display: inline; }
}

/* ── Long-form article typography ─────────────────────────────────────── */
.blog-article {
    max-width: 46rem;
    font-size: 1.06rem;
}
.blog-article > p:first-of-type {
    font-size: 1.18rem;
    color: rgba(255,255,255,.85);
    line-height: 1.6;
}
.blog-article h2 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .95rem; letter-spacing: .03em; text-transform: uppercase;
    font-weight: 600; color: #c4b5fd;
    margin-top: 3rem; margin-bottom: 1.1rem;
}
.blog-article h3 { font-size: 1.15rem; font-weight: 700; margin-top: 2rem; margin-bottom: .8rem; }
.blog-article p { line-height: 1.8; margin-bottom: 1.5rem; color: rgba(255,255,255,.72); }
.blog-article ul, .blog-article ol { margin-bottom: 1.5rem; line-height: 1.8; color: rgba(255,255,255,.72); }
.blog-article li { margin-bottom: .5rem; }
.blog-article strong { color: #fff; font-weight: 700; }
.blog-article a { color: #c7d2fe; text-decoration-color: rgba(199,210,254,.4); }
.blog-article a:hover { text-decoration-color: currentColor; }
.blog-article code {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85em;
    background: rgba(255,255,255,.08); padding: .15em .4em; border-radius: 5px;
    overflow-wrap: break-word;
}
.blog-article blockquote {
    margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid #818cf8;
    color: rgba(255,255,255,.8); font-size: 1.08rem; font-style: italic;
}

.blog-cta {
    max-width: 46rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(255,255,255,.14);
}
.blog-cta h5 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem;
}
.blog-cta p { color: rgba(255,255,255,.52); margin: 0 0 1.25rem; font-size: .95rem; }

@media (max-width: 576px) {
    .blog-post-wrap { padding-top: .5rem; }
}