/* Blog post reading surface (day mode).
   One continuous calm background: no sky layer, no translucent section tints, so no seams.
   Scoped to body.post-page.day-mode so the homepage, guides and night mode are untouched. */

html.day-mode-html:has(body.post-page.day-mode) {
    background: #FBF7F1;
}

body.post-page.day-mode {
    --post-bg: #FBF7F1;
    --post-ink: #2B241D;
    --post-text: #3D342B;
    --post-muted: #7A6E62;
    --post-accent: #6D55B8;
    --post-rule: rgba(61, 52, 43, 0.10);
    background: var(--post-bg) !important;
    color: var(--post-text);
}

body.post-page.day-mode .day-bg,
body.post-page.day-mode .ambient-bg {
    display: none !important;
}

/* Reading column */
body.post-page.day-mode .blog-hero .container,
body.post-page.day-mode .post-article .container {
    max-width: 720px;
}

/* Header */
body.post-page.day-mode .blog-hero {
    padding: 4.25rem 0 1.25rem;
    background: none;
}

body.post-page.day-mode .blog-hero-inner {
    gap: 0.9rem;
}

body.post-page.day-mode .blog-back-link {
    color: var(--post-accent);
    font-size: 0.95rem;
    font-weight: 600;
}

body.post-page.day-mode .blog-hero-title {
    color: var(--post-ink);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
}

body.post-page.day-mode .post-meta {
    color: var(--post-muted);
    font-size: 0.92rem;
    gap: 0.5rem;
}

body.post-page.day-mode .post-meta span + span::before {
    content: "·";
    margin-inline-end: 0.5rem;
}

/* Cover image */
body.post-page.day-mode .post-article {
    padding: 0.75rem 0 4rem;
}

body.post-page.day-mode .post-hero-image {
    background: #EFE7DC;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(43, 36, 29, 0.10);
}

body.post-page.day-mode.blog-page .post-hero-image img,
body.post-page.day-mode .blog-page .post-hero-image img {
    aspect-ratio: 16 / 9;
    max-height: none;
    height: auto;
    object-fit: cover;
}

/* Article body: plain page, no card, no tint */
body.post-page.day-mode .post-content,
body.post-page.day-mode .blog-page .post-content {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    margin: 1.75rem 0 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--post-text);
}

body.post-page.day-mode .post-content p,
body.post-page.day-mode .post-content li {
    color: var(--post-text);
}

body.post-page.day-mode .post-content p {
    margin: 0 0 1.15em;
}

body.post-page.day-mode .post-content h2 {
    color: var(--post-ink);
    font-size: 1.5rem;
    line-height: 1.35;
    margin: 2.2em 0 0.6em;
}

body.post-page.day-mode .post-content h3 {
    color: var(--post-ink);
    font-size: 1.22rem;
    line-height: 1.4;
    margin: 1.8em 0 0.45em;
}

body.post-page.day-mode .post-content strong {
    color: var(--post-ink);
    font-weight: 700;
}

body.post-page.day-mode .post-content a {
    color: var(--post-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(109, 85, 184, 0.45);
}

body.post-page.day-mode .post-content a:hover {
    text-decoration-color: currentColor;
}

body.post-page.day-mode .post-content blockquote {
    border-inline-start: 3px solid rgba(109, 85, 184, 0.35);
    background: rgba(109, 85, 184, 0.05);
    color: var(--post-text);
    border-radius: 0 12px 12px 0;
}

body.post-page.day-mode .site-footer {
    background: transparent;
    border-top-color: var(--post-rule);
}

@media (max-width: 768px) {
    body.post-page.day-mode .blog-hero {
        padding: 3.75rem 0 1rem;
    }

    body.post-page.day-mode .blog-hero .container,
    body.post-page.day-mode .post-article .container {
        padding-inline: 1.25rem;
    }

    body.post-page.day-mode .post-hero-image {
        border-radius: 14px;
    }

    body.post-page.day-mode .post-content,
    body.post-page.day-mode .blog-page .post-content {
        width: auto;
        margin: 1.5rem 0 0;
        padding: 0;
        font-size: 1.0625rem;
        line-height: 1.8;
    }

    body.post-page.day-mode .post-content h2 {
        font-size: 1.35rem;
    }

    body.post-page.day-mode .post-content h3 {
        font-size: 1.15rem;
    }
}