/**
 * Blog post body typography (single.php only).
 *
 * The site's bare h2 rule in main.css is sized for full-width marketing
 * section headers (clamp 29-48px). Reused inside an 820px article column it
 * reads oversized, so post-body headings get their own smaller scale here
 * rather than fighting the global rule with inline styles per heading.
 */
/*
 * The site's marketing .hero (radial glow, up to 70px h1 sized for a five-word
 * tagline) reads as bloated and wraps a real article title across six lines.
 * Post titles are keyword-length by nature, so the post hero is its own,
 * deliberately plain, block: no glow, a title scaled to actually fit.
 */
.post-hero{padding:clamp(32px,5vw,52px) 0 clamp(20px,3vw,32px)}
.post-hero .wrap{max-width:760px;margin:0 auto;padding-inline:var(--gut)}
/* Unbounded (the sitewide h1/h2 font) is a heavy, rounded display face built
   for a handful of marketing words. Stretched across a keyword-length article
   title it reads chunky and sticker-like rather than editorial, so the post
   title uses the site's Inter body face instead, still on-brand, just built
   to carry a full sentence. */
.post-title{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:700;font-size:clamp(28px,3.3vw,42px);line-height:1.28;
  letter-spacing:-.015em;margin:18px 0 14px;max-width:none;color:var(--ink);
}

.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-3);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:.02em;
}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3);flex:none}
/* The byline used to be flat mono text, easy to mistake for a stray
   timestamp. A small brand mark (same gradient square as the header logo,
   just smaller) plus Inter for the author name gives it real weight, while
   date and read time stay in the lighter mono style used for metadata
   everywhere else on the site. */
.post-author{
  display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;
  font-family:'Inter',sans-serif;font-size:13.5px;letter-spacing:0;
}
.post-avatar{
  width:22px;height:22px;border-radius:7px;background:var(--grad);flex:none;
  display:grid;place-items:center;color:#fff;font-size:11px;
  box-shadow:0 3px 10px rgba(108,92,231,.32);
}

/* Matches .wrap-narrow (820px), the same column the article body and the
 * in-post figures sit in. At the old 1040px this rendered noticeably wider
 * than everything below it and pushed most source images past their sharp
 * display size, reading as oversized and soft. */
.post-banner{
  max-width:820px;margin:0 auto clamp(32px,5vw,56px);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.post-banner img{display:block;width:100%;height:auto}

.post-body{font-size:17px;line-height:1.75;color:var(--ink-2)}
.post-body > * + *{margin-top:26px}
.post-body h2{
  font-size:clamp(22px,2.6vw,28px);color:var(--ink);margin-top:50px;line-height:1.2;
}
.post-body p{margin-bottom:0}
.post-body strong{color:var(--ink);font-weight:600}
.post-body ul{margin-bottom:0;padding:0;list-style:none;display:grid;gap:14px}
.post-body ul li{padding-left:24px;position:relative}
.post-body ul li::before{
  content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--violet);
}
.post-body a{color:var(--violet);text-decoration:underline;text-decoration-color:rgba(124,108,255,.35);text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--violet)}

.post-fig{
  margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.post-fig img{display:block;width:100%;height:auto}
/* Overrides the 26px default from .post-body > * + * : a figure sitting
   right under its heading reads cramped at that gap, it needs breathing
   room like the heading itself gets above it. */
.post-body h2 + .post-fig{margin-top:32px}

/* A caption inside the figure card, for the graphics that need one: a bar
   under the image, set off from it, so a mock-up can say it is a mock-up
   without a stray line floating in the body copy. */
.post-fig figcaption{
  padding:10px 14px 12px;font-size:13px;line-height:1.5;color:var(--ink-3);
  background:var(--paper-2);border-top:1px solid var(--line-2);
}

/* Numbered steps, styled to match the dot bullets above. */
.post-body ol{margin-bottom:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:post-ol}
.post-body ol li{padding-left:38px;position:relative;counter-increment:post-ol}
.post-body ol li::before{
  content:counter(post-ol);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  color:var(--violet);background:rgba(124,108,255,.1);border:1px solid rgba(124,108,255,.25);
}

/* Tables scroll inside their own box on a phone rather than widening the page. */
.post-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);border-radius:var(--r);}
.post-body table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5}
.post-body th,.post-body td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.post-body tbody tr:last-child td{border-bottom:0}
.post-body th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;background:var(--paper-2)}
.post-body td:first-child{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--violet);font-weight:600}
.post-body td:nth-child(2){color:var(--ink);font-weight:600;white-space:nowrap}
.post-body code{
  font-family:'IBM Plex Mono',monospace;font-size:.88em;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;
}