/* Tilman's Blog. Dark, high contrast, indigo accent (matches the site). */
.blog-hero{padding:56px 0 36px;border-bottom:1px solid #2a2a2a}
.blog-hero h1{font:500 1.4rem/1.3 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin:.5rem 0 1.4rem;color:#f0f0f0;max-width:30em}
.blog-follow{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.blog-btn{background:#818cf8;color:#0a0a0a!important;text-decoration:none;border-radius:8px;padding:.7rem 1.3rem;font:600 1rem 'Space Grotesk',sans-serif}
.blog-btn:hover{background:#a5b0fb}
.blog-rss{font:500 .85rem 'IBM Plex Mono',monospace;color:#818cf8;text-decoration:none;border-bottom:1px dotted #818cf8}
.blog-note{font:.8rem 'IBM Plex Mono',monospace;color:#9a9a9a}
.blog-list{padding:.5rem 0 3rem}
.blog-card{padding:2rem 0 2rem 1.2rem;border-bottom:1px solid #2a2a2a;border-left:3px solid transparent;transition:border-color .15s}
.blog-card:hover{border-left-color:#818cf8}
.blog-meta{font:.8rem 'IBM Plex Mono',monospace;color:#9a9a9a}
.blog-card h2{font:600 1.7rem/1.2 'Space Grotesk',sans-serif;margin:.35rem 0 .6rem;letter-spacing:-.01em}
.blog-card h2 a{color:#f0f0f0;text-decoration:none}
.blog-card h2 a:hover{color:#818cf8}
.blog-card p{margin:0;color:#cfcfcf}
.blog-more{display:inline-block;margin-top:.7rem;color:#818cf8;text-decoration:none;font:500 .9rem 'IBM Plex Mono',monospace}
.blog-post .article-header h1{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
.blog-cta{margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid #2a2a2a;color:#9a9a9a}
.blog-cta a{color:#818cf8}
@media (max-width:600px){.blog-hero h1{font-size:1.15rem}}
/* Optional image on a blog post: shown at its own size (never stretched), shrunk only when the space is narrower */
.blog-figure{margin:1.6rem 0;width:fit-content;max-width:min(760px,100%)}
.blog-figure img{display:block;max-width:100%;height:auto}
.blog-figure figcaption{font:.8rem 'IBM Plex Mono',monospace;color:#9a9a9a;margin-top:.5rem}
/* Image beside the title: it sits to the left or right of the title block; on a phone it drops below the date line */
.article-header--image{display:flex;align-items:center;gap:2rem}
.article-header-text{flex:1 1 0;min-width:0}
.article-header--image .blog-figure{margin:0;flex:0 0 auto;max-width:min(40%,380px)}
.article-header--title-left .blog-figure{order:-1}
@media (max-width:700px){.article-header--image{display:block}.article-header--image .blog-figure{max-width:100%;margin-top:1rem}}