/* MarketIV blog — article + list. Matches the marketing aesthetic (ivory bg, Noto Sans body,
   italic accents, black ink). Loaded on /blog/** only. Zero runtime JS. */
:root{
  /* warm-neutral tokens (--bg/--ivory/--black/--muted/--dim) come from /css/mdx-tokens.css via
     site-nav.css; blog keeps only its line colour, accents and its own 22px radius. NOTE: blog does
     NOT load taste-core, so the reset / body / .serif rules below are load-bearing, not duplicates. */
  --line:#E4E1DA; --pos:#3CE08C; --neg:#C84BD6; --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--black);font-family:var(--font);font-weight:500;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:500}
a{color:inherit}

/* ---- shared wrapper ---- */
.blog-wrap{max-width:760px;margin:0 auto;padding:150px 28px 96px}
.blog-wide{max-width:1100px}

/* ---- list / home ---- */
.blog-head{margin-bottom:56px}
.blog-head .kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:600}
.blog-head h1{font-size:52px;line-height:1.05;letter-spacing:-1.5px;font-weight:700;margin-top:14px}
.blog-head p{margin-top:18px;font-size:18px;color:var(--muted);max-width:560px;line-height:1.5}
.post-list{display:flex;flex-direction:column;gap:2px}
.post-card{display:block;padding:28px 0;border-top:1px solid var(--line);transition:padding-left .2s}
.post-card:hover{padding-left:8px}
.post-card .pc-topic{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pos);font-weight:600;filter:brightness(.72)}
.post-card h2{font-size:27px;line-height:1.18;letter-spacing:-.5px;font-weight:700;margin:8px 0 8px}
.post-card p{color:var(--muted);font-size:16px;line-height:1.5}
.post-card .pc-meta{margin-top:12px;font-size:13px;color:var(--dim)}

/* ---- article ---- */
.post-hero{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:var(--radius);display:block;margin-bottom:36px;background:var(--ivory)}
@media(min-width:900px){.post-hero{width:calc(100% + 160px);margin-left:-80px}}  /* gentle full-bleed past the text column on desktop */
.post-header{margin-bottom:40px}
.post-header .ph-topic{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pos);font-weight:600;filter:brightness(.72)}
.post-header h1{font-size:44px;line-height:1.08;letter-spacing:-1.2px;font-weight:700;margin:14px 0 18px}
.post-header .ph-meta{font-size:14px;color:var(--dim)}
.post-header .ph-meta b{color:var(--muted);font-weight:500}
.post-body{font-size:18px;line-height:1.72;color:#17140F}
.post-body>*+*{margin-top:24px}
.post-body h2{font-size:30px;line-height:1.2;letter-spacing:-.6px;font-weight:700;margin-top:52px}
.post-body h3{font-size:23px;letter-spacing:-.3px;font-weight:700;margin-top:40px}
.post-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--dim)}
.post-body a:hover{text-decoration-color:var(--black)}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li+li{margin-top:8px}
.post-body blockquote{border-left:3px solid var(--black);padding-left:22px;color:var(--muted);font-style:italic}
.post-body img{max-width:100%;height:auto;border-radius:var(--radius);display:block}
.post-body code{font-family:var(--font-mono);font-size:.88em;background:var(--ivory);padding:2px 6px;border-radius:6px}
.post-body pre{background:#0d0b09;color:#eee;padding:22px;border-radius:var(--radius);overflow-x:auto;font-size:14.5px;line-height:1.6}
.post-body pre code{background:none;padding:0;font-size:inherit}
.post-body pre.shiki{background:#0d0b09 !important}
.post-body hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.post-foot{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.post-foot a{text-decoration:underline;text-underline-offset:3px}
.back-link{display:inline-block;margin-bottom:40px;font-size:14px;color:var(--muted)}
.back-link:hover{color:var(--black)}

@media(max-width:640px){
  .blog-wrap{padding:120px 20px 72px}
  .blog-head h1{font-size:38px}
  .post-header h1{font-size:33px}
  .post-body{font-size:17px}
}