/* Light overlay for generated /blog/ pages (inline dark <style> stays; this file loads after). */
body {
    --paper: #f6f3f0;
    --ink: #1c1414;
    --muted: #5e4f4f;
    --link: #9b1c2c;
    --link-hover: #6e1018;
    --line: #e4d6d2;
    --header: #fffdfb;
    --card: #ffffff;
    --wash: #fff8f6;
    color-scheme: light;
    background-color: var(--paper);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    word-spacing: normal;
    height: auto;
    min-height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.25rem 20px 20px;
}

a,
.blog-link,
.source-link,
#back-nav,
.visit-site a {
    color: var(--link);
}

a:hover,
.blog-link:hover,
.source-link:hover,
#back-nav:hover,
.keyword-link:hover {
    color: var(--link-hover);
}

h1, h2, h3, h4, h5, h6,
.blog-title,
.topic-card h2,
.related-topics h3 {
    color: var(--ink);
}

h1 {
    font-size: 24px;
    line-height: 1.3;
}

p {
    word-spacing: normal;
}

.blog-item,
.blog-content,
.blog-description,
.topic-card,
.related-topics,
blockquote,
pre, code {
    background-color: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

.blog-description,
.blog-footer,
.topic-description,
.post-count,
.date-label,
.footer,
.breadcrumb,
.topic-card p,
.topic-card .count,
.keyword-link,
.source-pub-link,
.blog-schema figcaption,
blockquote {
    color: var(--muted);
}

.source-pub-link:hover {
    color: var(--ink);
}

.header,
.blog-header,
.footer,
hr {
    border-color: var(--line);
}

/* Blog pages set body line-height to 1.6. The shared banner keeps the normal rhythm used on the rest of the site. */
header[role="banner"],
header[role="banner"] a,
header[role="banner"] button,
#timestamp,
#timestamp span,
#nav-container,
#search-container,
#search-input {
    line-height: normal;
    word-spacing: normal;
    letter-spacing: normal;
}

header[role="banner"] a {
    color: var(--ink);
    font-size: 13px;
    font-weight: normal;
    text-decoration: underline;
}
header[role="banner"] a:hover {
    color: var(--link);
    text-decoration: underline;
}

.blog-item {
    border: 1px solid var(--line);
    border-radius: 0;
    transform: none;
}
.blog-item:hover {
    transform: none;
    background-color: var(--wash);
}
.blog-link {
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #d4a8a8;
    text-underline-offset: 0.18em;
}

.blog-description,
blockquote {
    border-left-color: var(--link);
}

.visit-site a {
    border-color: var(--link);
}

.topic-tag,
.keyword {
    background-color: var(--wash);
    color: var(--ink);
}

.topic-tag:hover {
    background-color: var(--line);
    color: var(--link);
}

.topic-card {
    background-color: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
}

.topic-card:hover {
    background-color: var(--wash);
    border-color: var(--link);
}

.topic-card h2,
a.topic-card {
    color: var(--ink);
}

.topic-card p,
.topic-card .count {
    color: var(--muted);
}

.blog-schema {
    background: var(--card);
    border-color: var(--line);
}

.blog-schema svg,
.blog-schema img {
    background: var(--paper);
}

.keywords-box {
    background-color: var(--wash);
    border-color: var(--line);
    scrollbar-color: var(--link) var(--line);
}

.keywords-box::-webkit-scrollbar-track {
    background: var(--line);
}

.keywords-box::-webkit-scrollbar-thumb {
    background-color: var(--link);
}