/* ── Page title ─────────────────────────────────────────────────────────── */

.page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 1.75rem;
}

/* ── Page body typography ────────────────────────────────────────────────── */

.page-body {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
    word-break: break-word;
}

.page-body p            { margin-top: 0; margin-bottom: 1.4em; }

.page-body h2           { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: #ffffff; margin-top: 2em; margin-bottom: 0.6em; }
.page-body h3           { font-size: 1.28rem; font-weight: 700; line-height: 1.25; color: #ffffff; margin-top: 1.7em; margin-bottom: 0.5em; }
.page-body h4           { font-size: 1.05rem; font-weight: 700; color: #ffffff; margin-top: 1.4em; margin-bottom: 0.4em; }

.page-body ul,
.page-body ol           { padding-left: 1.6em; margin-bottom: 1.4em; }
.page-body li           { margin-bottom: 0.1em; }

.page-body blockquote {
    margin: 1.5em 0;
    padding: 0.75em 1.5em;
    border-left: 4px solid #3b82f6;
    color: #aaaaaa;
    font-style: italic;
}
.page-body blockquote p:last-child { margin-bottom: 0; }

.page-body img          { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 4px; }
.page-body a            { color: #3b82f6; text-decoration: underline; text-underline-offset: 2px; }
.page-body a:hover      { color: #60a5fa; }
.page-body strong,
.page-body b            { font-weight: 700; color: #ffffff; }

.page-body hr           { border: none; border-top: 1px solid #2a2a2a; margin: 2.5em 0; }

.page-body pre {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1em 1.25em;
    overflow-x: auto;
    margin-bottom: 1.4em;
    font-size: 0.875em;
    line-height: 1.5;
}
.page-body code {
    background: #1e1e1e;
    border-radius: 3px;
    padding: 0.15em 0.4em;
    font-size: 0.875em;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #e0e0e0;
}
.page-body pre code { background: none; padding: 0; font-size: inherit; }

/* ── Embedded post grids (the [!-- category=slug --] shortcode) ─────────────
   .post-card/.post-grid live in site.css and already look right on /blog —
   but nested inside .page-body here, the generic prose rules above
   (.page-body a / h2 / p) win on specificity and override them (blue
   underlined links, oversized serif-ish headings). These re-assert the
   card's own site.css values with enough specificity to win instead. */
.page-body .post-grid a.post-card,
.page-body .post-grid a.post-card:hover {
    color: inherit;
    text-decoration: none;
}
.page-body .post-grid .post-card-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 0.6rem;
}
.page-body .post-grid a.post-card:hover .post-card-title {
    color: var(--accent);
}
.page-body .post-grid .post-card-excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    text-decoration: none;
    margin: 0 0 0.75rem;
}
.page-body .post-grid .post-card-date {
    text-decoration: none;
}