/* Blog — post index.
   The article column is a deliberately different surface from the rest of
   the site: gray ground, IBM Plex. Everything here is scoped to
   .blog-shell so it cannot reach the nav or the footer, which keep
   shared.css tokens, DM Sans and the #7374ff accent.
   Loaded after shared.css. */

/* Article column only. The chrome above and below keeps shared.css tokens,
   DM Sans and the #7374ff accent. Everything here is scoped to .blog-shell. */
.blog-shell {
    --bg:   #1b1b20; --bg-2: #23232a; --bg-3: #2b2b33;
    --line: #33333d; --line-2: #414150;
    --ink:  #ecedf2; --ink-2: #a8a8b4; --ink-3: #7c7c89;
    --accent: #8384ff; --accent-2: #a3a4ff; --accent-fill: #5758f0; --on-accent: #fff;
    --c1: #7c7dfa; --c2: #25a98d; --c3: #c8822e;
    --good: #4ade80; --warn: #e07a5f;
    --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px; line-height: 1.75;
    position: relative; z-index: 1;
}
[data-theme="light"] .blog-shell {
    --bg: #f1f1f4; --bg-2: #ffffff; --bg-3: #e9e9ee;
    --line: #dedee4; --line-2: #c6c6d0;
    --ink: #1a1a20; --ink-2: #55555f; --ink-3: #80808d;
    --accent: #4a4cde; --accent-2: #3a3cc4; --accent-fill: #4547d6;
    --c1: #5a5ce0; --c2: #0f9e86; --c3: #c9751a;
    --good: #1d7a57; --warn: #b8462c;
}
.blog-shell a { color: inherit; text-decoration: none; }
.blog-shell .wrap { width: 100%; max-width: 760px; margin: 0 auto; padding-inline: 24px; }
.blog-shell .titleband { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 52px 0 44px; }
.blog-shell .kicker { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.blog-shell h1 { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px; color: var(--ink); text-wrap: balance; }
.blog-shell .dek { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 42em; }
.blog-shell .byline { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.blog-shell .byline b { color: var(--ink-2); font-weight: 500; }

/* Seam fix. .site-footer ships with no background of its own, so it shows the
   near-black body through and the gray article ends in a hard step. Carrying
   the same gray into the footer makes everything below the nav one surface;
   the divider drops to the gray build's own hairline. */
body[data-page="blog"] { background: #1b1b20; }
body[data-page="blog"] .site-footer { background: #1b1b20; border-top-color: #33333d; }
[data-theme="light"] body[data-page="blog"],
[data-theme="light"] body[data-page="blog"] .site-footer { background: #f1f1f4; }
[data-theme="light"] body[data-page="blog"] .site-footer { border-top-color: #dedee4; }

.blog-shell main { padding: 32px 0 72px; }

/* Two tags only, sized up. The Deadlock chip carries the product mark so the
   row reads as a game filter rather than a generic pill. */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filters button {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: .84rem; font-weight: 500; letter-spacing: .04em;
    color: var(--ink-3); background: none; border: 1px solid var(--line);
    border-radius: 8px; padding: 9px 16px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.filters button:hover { color: var(--ink-2); border-color: var(--line-2); }
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); background: var(--bg-2); }
.filters button img { width: 18px; height: 18px; border-radius: 4px; display: block; }
.filters button[aria-pressed="false"] img { opacity: .55; transition: opacity .15s; }
.filters button:hover img { opacity: 1; }

.posts { display: flex; flex-direction: column; }
.post {
    display: grid; grid-template-columns: 168px 1fr auto; gap: 6px 22px;
    align-items: start; padding: 26px 0; border-top: 1px solid var(--line);
}
.post:last-of-type { border-bottom: 1px solid var(--line); }
.post:hover .post-title { color: var(--accent); }
.post-thumb {
    grid-row: span 2; width: 168px; aspect-ratio: 16/9; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--line); display: block;
    transition: border-color .15s;
}
.post:hover .post-thumb { border-color: var(--line-2); }
.post-main { min-width: 0; }
.post-title { font-size: 1.22rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 6px; transition: color .15s; }
.post-dek { font-size: .95rem; color: var(--ink-2); line-height: 1.6; margin: 0 0 10px; max-width: 60ch; }
.post-meta { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.tag { color: var(--accent); }
.post-date { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.empty { display: none; color: var(--ink-3); font-size: .92rem; padding: 28px 0; }
@media (max-width: 680px) {
    .post { grid-template-columns: 1fr; gap: 10px; }
    .post-thumb { grid-row: auto; width: 100%; }
    .post-date { order: -1; padding-top: 0; }
}