/* 530utopian.help · assets/blog.css
   ==========================================================================================
   SITE: loaded by /blog/ (the index). Posts load their own stylesheet.
   Engine tokens and type roles only: no new colors, no radius, nothing centered, no motion.
   ========================================================================================== */
.bl-head{padding:var(--s7) 0 var(--s6); border-bottom:var(--mid) solid var(--ink)}
.bl-head .poster{margin:var(--s2) 0 var(--s4)}
.bl-head .poster em{font-style:normal; color:var(--mark)}
.bl-head .deck{max-width:32em}
.bl-rss{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; margin:var(--s4) 0 0}
.bl-list{list-style:none; margin:0 0 var(--s8); padding:0}
.bl-post{display:grid; gap:var(--s4); padding:var(--s6) 0; border-bottom:var(--hair) solid var(--ink)}
@media(min-width:900px){ .bl-post{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s6); align-items:start} }
.bl-link{display:flex; flex-direction:column; gap:var(--s2); color:var(--ink); text-decoration:none}
.bl-meta{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mark)}
.bl-title{font-family:var(--voice); font-weight:700; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:.88; letter-spacing:-.035em; font-variation-settings:"wdth" 76,"opsz" 96}
.bl-sub{font-family:var(--voice); font-weight:700; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.1; font-variation-settings:"wdth" 86,"opsz" 36}
.bl-dek{font-family:var(--read); font-style:italic; font-weight:300; font-size:var(--t-lg); line-height:1.45; color:var(--ink-soft); max-width:32em}
.bl-go{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; margin-top:var(--s2)}
.bl-link:hover .bl-title,.bl-link:focus-visible .bl-title{box-shadow:inset 0 -2px 0 var(--mark); align-self:flex-start}
.bl-link:hover .bl-go,.bl-link:focus-visible .bl-go{color:var(--mark)}
.bl-img{display:block; width:100%; height:auto; border:var(--hair) solid var(--ink)}