/* kt8.com blog: the listing at /blog/ and each post. Colours, type, top bar and footer come from site.css. */
.blog { padding-block: 56px 88px; }
.blog-head { max-width: 720px; margin-bottom: 28px; }
.blog h1 { font-weight: 650; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); letter-spacing: -0.04em; line-height: 1.06; margin: 14px 0 14px; text-wrap: balance; }
.blog .lede { font-size: 1.3125rem; color: var(--ink); margin: 0; }
.blog .feed { margin: 14px 0 0; font-size: 1rem; }
.blog .feed a { color: var(--ink-soft); }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.chip { text-decoration: none; font-size: 1rem; font-weight: 550; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--sheet); transition: border-color .15s, color .15s; }
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Post cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card[hidden] { display: none; }
.card .thumb { display: block; aspect-ratio: 1200 / 630; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-text { padding: 18px 20px 22px; }
.card h2 { font-size: 1.45rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.25; margin: 8px 0 8px; }
.card h2 a { text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { margin: 0; color: var(--ink); font-size: 1.125rem; line-height: 1.6; }
.empty { color: var(--ink-soft); }

/* Category, date and reading time */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 1rem; color: var(--ink-soft); margin: 0; }
.meta .cat { position: relative; z-index: 1; text-decoration: none; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8125rem; color: var(--post); background: var(--post-soft); padding: 4px 9px; border-radius: 999px; }

/* A post */
.post { max-width: 900px; margin: 0 auto; }
.crumbs { font-size: 1.0625rem; color: var(--ink-soft); margin: 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.post h1 { margin-top: 18px; }
.post > .meta { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.prose { font-size: 1.3125rem; line-height: 1.7; }
@media (max-width: 600px) { .prose { font-size: 1.1875rem; } }
.prose > p:first-child { font-size: 1.15em; color: var(--ink); }
.prose p, .prose li { color: var(--ink); }
.prose strong { color: var(--ink); }
.prose a { color: var(--post); text-underline-offset: 3px; }
.prose h2 { font-size: 1.6em; font-weight: 630; letter-spacing: -0.025em; line-height: 1.2; margin: 52px 0 14px; scroll-margin-top: 84px; color: var(--ink); }
.prose h3 { font-size: 1.25em; font-weight: 620; letter-spacing: -0.015em; margin: 36px 0 10px; scroll-margin-top: 84px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 6px 0; }
.prose code { font-family: var(--f-mono); font-size: 0.9em; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--post); }
.prose blockquote p { font-size: 1.3em; font-weight: 620; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); margin: 0; }
.prose figure { margin: 32px 0; }
.prose figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.prose figcaption { font-size: 0.85em; color: var(--ink-soft); text-align: center; margin-top: 10px; }

.prose .table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.85em; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--bg-2); color: var(--ink); font-weight: 650; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { color: var(--ink); font-weight: 560; }
.prose td { color: var(--ink); }
@media (max-width: 600px) { .prose table { min-width: 600px; } }

/* ::: callout and ::: cta boxes */
.prose .box { border-radius: var(--radius-sm); padding: 18px 22px; margin: 28px 0; }
.prose .box > :first-child { margin-top: 0; }
.prose .box > :last-child { margin-bottom: 0; }
.prose .box-callout { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--ink-faint); }
.prose .box-callout p { font-size: 0.95em; }
.prose .box-cta { background: var(--post-soft); border: 1px solid color-mix(in srgb, var(--post) 30%, transparent); }
.prose .box-cta p { color: var(--ink); font-size: 0.95em; }
.prose .box-cta a { color: var(--post); }
.prose .box-cta p:last-child > a:only-child { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--post); color: #fff; font-weight: 600; text-decoration: none; margin-top: 4px; }
.prose .box-cta p:last-child > a:only-child:hover { background: var(--post-deep); }

.more { max-width: 1100px; margin: 80px auto 0; padding-top: 40px; border-top: 1px solid var(--line); }
.more > h2 { font-size: 1.6rem; font-weight: 620; margin: 0 0 20px; }