/* Blog styles. Extends the site's Plot/Seam system (worktype.css); loaded
   only on /blog pages. Every value derives from a token there. */

/* --- INDEX --------------------------------------------------------------- */
.blog-head{padding:72px 0 var(--s7);text-align:center}
.blog-head .kick{margin:0 0 var(--s4)}
.blog-head h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,6.5vw,80px);line-height:.88;letter-spacing:-.02em;margin:0 0 var(--s4)}
.blog-head .lede{font-size:18px;line-height:1.6;color:var(--drift-mute);max-width:56ch;margin:0 auto}

.blog-list{padding:0 0 var(--s10)}
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--drift-hair)}
/* Horizontal padding so the hover fill is not flush with the text. The block
   still spans the full column, so the fill and dividers stay full width while
   the text sits inset from the panel edges. */
.entry{display:block;padding:var(--s6) var(--s5);border-bottom:1px solid var(--drift-hair);
  text-decoration:none;color:inherit;transition:background .12s}
.entry:hover{background:var(--drift-fill)}
.entry:hover .entry-title{color:var(--std)}
.entry-meta{font-family:var(--body);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--drift-mute-2);margin:0 0 var(--s2)}
.entry-tag{color:var(--std);font-weight:700}
.entry-title{font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.15;
  margin:0 0 var(--s2);color:var(--drift-ink);transition:color .12s}
.entry-desc{font-size:16px;line-height:1.6;color:#3d444d;margin:0;max-width:70ch}

/* --- ARTICLE ------------------------------------------------------------- */
/* Masthead is centered (matching the blog index); the body stays left-aligned
   for reading. */
.post{padding:64px 0 0}
.post .kick{margin:0 0 var(--s4);text-align:center}
.kick-link{color:var(--std);text-decoration:none}
.kick-link:hover{border-bottom:1px solid currentColor}
.post-title{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,5.4vw,64px);line-height:.9;letter-spacing:-.02em;margin:0 auto var(--s4);
  max-width:22ch;text-align:center}
.post-meta{font-family:var(--body);font-size:14px;color:var(--drift-mute-2);text-align:center;
  margin:0 0 var(--s7);padding-bottom:var(--s5);border-bottom:1px solid var(--drift-hair)}

/* Body: leans on .prose from worktype.css, with a wider measure and the
   blockquote/lead treatment that marked output needs. */
.post-body{max-width:none}
.post-body > p:first-of-type{font-size:20px;line-height:1.6;color:var(--drift-ink)}
.post-body h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:30px;line-height:.96;letter-spacing:-.015em;margin:var(--s8) 0 var(--s3)}
.post-body h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:var(--s6) 0 var(--s2)}
.post-body p,.post-body li{font-size:17px;line-height:1.7;color:#33393f}
.post-body ul,.post-body ol{margin:0 0 var(--s5);padding-left:22px}
.post-body li{margin-bottom:var(--s2)}
.post-body strong{font-weight:600;color:var(--drift-ink)}
.post-body a{color:var(--std);text-decoration:none;border-bottom:1px solid rgba(27,58,107,.3)}
.post-body a:hover{border-bottom-color:var(--std)}
.post-body blockquote{margin:var(--s6) 0;padding:var(--s2) 0 var(--s2) var(--s5);
  border-left:2px solid var(--std);font-size:20px;line-height:1.55;color:var(--drift-ink);font-style:normal}
.post-body blockquote p{font-size:20px;color:var(--drift-ink)}
.post-body hr{border:0;border-top:1px solid var(--drift-hair);margin:var(--s7) 0}
.post-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
  background:var(--drift-fill);padding:2px 6px;border-radius:3px}

/* End-of-post CTA and back link. */
.post-cta{margin:var(--s9) 0 var(--s7);padding:var(--s6);border:1px solid var(--drift-hair);
  background:var(--drift-fill)}
.post-cta .kick{margin:0 0 var(--s3)}
.post-cta p{font-size:16px;line-height:1.6;color:#3d444d;margin:0 0 var(--s5);max-width:60ch}
.post-cta .cta{display:flex;gap:var(--s3);flex-wrap:wrap}
.post-back{margin:0 0 var(--s10)}
.post-back a{font-size:15px;color:var(--drift-mute);text-decoration:none}
.post-back a:hover{color:var(--std)}

@media(max-width:600px){
  .post-body p:first-of-type{font-size:18px}
  .post-body p,.post-body li{font-size:16px}
}