/* Blog pages reuse the inolake.com stylesheet (header, footer, contact, tokens).
   This file only adds what the site does not have: the light reading surface and the post layout. */

:root {
    --paper-deep: #e4ebe3;
}

body.blog {
    background: var(--paper);
    color: var(--ink-dark);
}

.blog .mobile-nav,
.blog .contact,
.blog .footer {
    color: var(--ink);
}

.blog .language-switcher button:disabled {
    color: #56695f;
    cursor: default;
}

.blog-main {
    padding-top: 72px;
}

.blog-shell { width: min(var(--shell-max), 100% - var(--shell-gutter) * 2); margin-inline: auto; }
.blog-shell--narrow { width: min(760px, 100% - var(--shell-gutter) * 2); }
.blog-shell--wide { width: min(1040px, 100% - var(--shell-gutter) * 2); }

.blog-eyebrow { margin: 0; color: var(--green); font-size: 0.74rem; font-weight: 570; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }

/* Index */

.blog-hero { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); }
.blog-hero h1 { max-width: 900px; margin: 28px 0 0; font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 430; letter-spacing: -0.045em; line-height: 0.98; }
.blog-hero__intro { max-width: 560px; margin: 28px 0 0; color: var(--muted-dark); font-size: 1.04rem; line-height: 1.75; }

.blog-list { padding-bottom: clamp(80px, 10vw, 140px); }
.blog-item { padding: 32px 0 40px; border-top: 1px solid var(--line-dark); }
.blog-item h2 { max-width: 820px; margin: 12px 0 0; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 470; letter-spacing: -0.04em; line-height: 1.12; }
.blog-item h2 a { transition: color 200ms ease; }
.blog-item h2 a:hover { color: var(--green); }
.blog-item__excerpt { max-width: 640px; margin: 14px 0 0; color: var(--muted-dark); font-size: 0.98rem; line-height: 1.7; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; color: var(--green); font-size: 0.74rem; font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase; }
.blog-meta > * + *::before { margin-right: 18px; color: rgba(12, 24, 21, 0.35); content: '/'; font-weight: 400; }
.blog-meta a:hover { text-decoration: underline; }
.blog-post__author { margin: 22px 0 0; color: var(--muted-dark); font-size: 0.92rem; }
.blog-post__author span { color: var(--ink-dark); font-weight: 560; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; padding: 0; color: var(--muted-dark); font-size: 0.74rem; letter-spacing: 0.04em; list-style: none; text-transform: uppercase; }
.blog-tags li::before { margin-right: 4px; color: var(--green); content: '#'; }
.blog-empty { padding: 48px 0; border-top: 1px solid var(--line-dark); color: var(--muted-dark); font-size: 1.04rem; }
.blog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line-dark); color: var(--muted-dark); font-size: 0.88rem; }
.blog-pagination a { color: var(--ink-dark); font-weight: 540; }
.blog-pagination a:hover { color: var(--green); }

/* Post */

.blog-post__header { padding: clamp(56px, 8vw, 110px) 0 clamp(32px, 5vw, 56px); }
.blog-post__header h1 { margin: 24px 0 0; font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 430; letter-spacing: -0.045em; line-height: 1.02; }
.blog-post__lede { margin: 24px 0 0; color: var(--muted-dark); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; }
.blog-post__cover { margin: 0 0 clamp(32px, 5vw, 56px); }
.blog-post__cover img { display: block; width: 100%; }

.blog-prose { font-size: 1.06rem; line-height: 1.75; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose p, .blog-prose ul, .blog-prose ol, .blog-prose blockquote, .blog-prose pre, .blog-prose table, .blog-prose figure { margin: 0 0 1.4em; }
.blog-prose h2 { margin: 2.4em 0 0.7em; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 470; letter-spacing: -0.035em; line-height: 1.15; }
.blog-prose h3 { margin: 2em 0 0.6em; font-size: clamp(1.2rem, 1.7vw, 1.4rem); font-weight: 520; letter-spacing: -0.02em; line-height: 1.25; }
.blog-prose h4 { margin: 1.6em 0 0.5em; font-size: 1.05rem; font-weight: 600; }
.blog-prose a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.blog-prose a:hover { color: var(--ink-dark); }
.blog-prose ul, .blog-prose ol { padding-left: 1.4em; }
.blog-prose li + li { margin-top: 0.4em; }
.blog-prose blockquote { padding: 4px 0 4px 22px; border-left: 2px solid var(--green); color: var(--muted-dark); font-size: 1.08rem; font-style: italic; }
.blog-prose blockquote p:last-child { margin-bottom: 0; }
.blog-prose code { padding: 0.12em 0.38em; background: rgba(12, 24, 21, 0.07); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; }
.blog-prose pre { overflow-x: auto; padding: 20px 24px; background: var(--night); color: var(--ink); font-size: 0.88rem; line-height: 1.6; }
.blog-prose pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.blog-prose img { display: block; margin: 0 auto; }
.blog-prose figcaption { margin-top: 10px; color: var(--muted-dark); font-size: 0.86rem; text-align: center; }
.blog-prose hr { margin: 3em 0; border: 0; border-top: 1px solid var(--line-dark); }
.blog-prose table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.blog-prose th, .blog-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line-dark); text-align: left; vertical-align: top; }
.blog-prose th { font-weight: 600; }
.blog-prose strong { font-weight: 620; }

.blog-post__footer { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(48px, 6vw, 72px); padding: 28px 0 clamp(64px, 8vw, 110px); border-top: 1px solid var(--line-dark); }
.blog-post__footer .blog-tags { margin: 0; }
.blog-post__footer .blog-meta { color: var(--muted-dark); }
.blog-back { align-self: flex-start; color: var(--ink-dark); font-size: 0.92rem; font-weight: 540; }
.blog-back:hover { color: var(--green); }

.blog-related { padding: clamp(56px, 8vw, 100px) 0 clamp(80px, 10vw, 140px); background: var(--paper-deep); }
.blog-related .blog-eyebrow { margin-bottom: 8px; }
.blog-related .blog-item:first-of-type { border-top: 0; }

@media (max-width: 900px) {
}

@media (max-width: 900px) {
    .blog-main { padding-top: 66px; }
}

@media (max-width: 640px) {
    .blog-prose { font-size: 1rem; }
    .blog-prose pre { margin-inline: calc(var(--shell-gutter) * -1); padding-inline: var(--shell-gutter); }
    .blog-pagination { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}