/* Notes from Drew: /blog/ and its posts (release 4, 2026-10-01).
   Loaded after styles.css + chrome.css + body.css on the blog pages only; uses their tokens. */
.crumbs{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--ink-400)}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--brand)}

.post-head .head{margin-bottom:0;max-width:52rem}
.post-head h1{text-wrap:balance}
.byline{display:flex;align-items:center;gap:.875rem;margin-top:.75rem}
.byline img{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;border:1px solid var(--ink-300);flex:none}
.byline p{display:flex;flex-direction:column;gap:.125rem}
.byline b{font-family:var(--disp);font-weight:700;color:var(--text-1)}
.byline b a:hover{color:var(--brand)}
.byline span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}

.post-body-wrap{padding-top:0}
.post-body{gap:1.25rem}
.post-body>p,.post-body>ol,.post-body>h2,.post-body>blockquote,.post-body>.sign{max-width:42rem}
.post-body>p,.post-body li{font-size:var(--fs-md);line-height:1.7}
.post-body>p.post-first{color:var(--text-1)}
.post-body>h2{font-size:clamp(1.5rem,1.4vw + 1rem,2rem);margin-top:1.75rem;text-wrap:balance}
.post-body>.eyebrow+h2{margin-top:0}

.path{list-style:none;counter-reset:path;padding:1.25rem 1.5rem !important;border:1px solid var(--ink-300);border-radius:var(--r-lg);background:var(--ink-050);gap:.625rem !important}
.path li{counter-increment:path;display:flex;gap:1rem;align-items:baseline;color:var(--text-1)}
.path li::before{content:counter(path,decimal-leading-zero);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--brand);flex:none}

.pull{margin:.75rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--brand)}
.pull p{font-family:var(--disp);font-weight:800;font-size:clamp(1.375rem,1.2vw + 1rem,1.75rem);line-height:1.2;letter-spacing:-.01em;color:var(--text-1)}

.post-offer__grid{display:grid;gap:2.5rem;align-items:center}
.post-offer__me{margin:0;max-width:22rem}
.post-offer__me img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--ink-300)}
.post-offer__me figcaption{margin-top:.625rem;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}
.post-offer .answer{color:var(--text-1)}
.sign{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem;padding-top:1.25rem;border-top:1px solid var(--ink-200)}
.sign p{font-family:var(--disp);font-weight:800;font-size:1.25rem;line-height:1.25;color:var(--text-1)}
.sign .sign__me{color:var(--brand)}
.post-ctas{margin-top:.75rem}
@media(min-width:62em){
  .post-offer__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:4rem}
  .post-offer__me{order:2;max-width:none;align-self:start;margin-top:3rem}
}

/* /blog/ index */
.notes-list{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;max-width:52rem}
.note-card{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--ink-300);border-radius:var(--r-lg);background:var(--ink-050);transition:border-color .2s,transform .2s}
.note-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.note-card__meta{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--text-3)}
.note-card h2{font-size:clamp(1.5rem,1.6vw + 1rem,2.25rem);text-wrap:balance}
.content .note-card h2 a{text-decoration:none;color:var(--text-1)}
.note-card:hover h2 a{color:var(--brand)}
.note-card h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.note-card h2 a:focus-visible{outline:none}
.note-card:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.note-card{position:relative}
.note-card p{color:var(--text-2);max-width:42rem}
.byline .note-card__go{color:var(--brand)}
@media(prefers-reduced-motion:reduce){.note-card,.note-card:hover{transition:none;transform:none}}