/* ============================================================
   BLOG — /blog and /blog/<slug>
   Ported 1-for-1 from prototype-blog.css (Wayfinder ticket 04):
   §1 shared primitives, §3 index variant B, §5 post typography,
   §7 post variant B (rail left, shipped as §8b), §9 WordPress compat.
   The rejected variants (§2 index A, §4 index C, §6 post A, §8 post C, and
   the earlier post D port) and the prototype switcher (§10) are not
   shipped. Nothing else here is new design.

   Loaded by the assembler alongside base.css, nav.css,
   components.css and pages/resources.css for every blog page.
   ============================================================ */

/* ============================================================
   1. SHARED BLOG PRIMITIVES
   ============================================================ */

.blog-page { padding: 140px 48px 100px; }
.blog-wrap { max-width: 1200px; margin: 0 auto; }
.blog-wrap-narrow { max-width: 760px; margin: 0 auto; }

.post-meta {
  font-size: 13px;
  color: var(--plum-muted);
  letter-spacing: 0.5px;
}

.tag-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--plum);
  background: linear-gradient(135deg, var(--purple-soft), var(--cyan-soft));
}

/* Pagination — 12 per page, numbered pills */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.pager a, .pager span {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--plum-soft);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(200,0,255,0.1);
  transition: all 0.3s;
}
.pager a:hover { background: white; color: var(--plum); transform: translateY(-2px); }
.pager .current {
  background: var(--gradient-cta);
  color: white;
  border-color: transparent;
}
.pager .gap { border: none; background: none; }

/* Empty state — no posts published yet */
.blog-empty {
  text-align: center;
  padding: 80px 32px;
  border: 1px dashed rgba(200,0,255,0.25);
  border-radius: 28px;
  background: rgba(255,255,255,0.5);
}
.blog-empty h3 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 12px;
}
.blog-empty p { color: var(--plum-muted); max-width: 460px; margin: 0 auto 24px; }

/* Newsletter signup — the card itself is filled in by the signup ticket;
   these are the shared chrome rules the rail variants override below. */
.signup {
  background: var(--lavender-mist);
  border: 1px solid rgba(200,0,255,0.1);
  border-radius: 28px;
  padding: 40px;
  text-align: center;
}
.signup h3 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--plum);
  margin-bottom: 10px;
}
.signup p { color: var(--plum-muted); font-size: 15px; margin-bottom: 24px; }
.signup form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.signup input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 100px;
  border: 1px solid rgba(200,0,255,0.18);
  background: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--plum);
}
.signup input:focus { outline: 2px solid var(--purple-warm); outline-offset: 1px; }
.signup .fine { font-size: 12px; margin: 14px 0 0; opacity: 0.75; }
.signup-band { padding: 80px 48px; background: var(--peach-glow); }
.signup-inline { margin: 56px 0; text-align: left; }
.signup-inline form { margin: 0; }
@media (max-width: 600px) {
  .signup form { flex-direction: column; }
  .signup input { width: 100%; }
}

/* ============================================================
   3. INDEX — lead story + dated river + sticky right rail
   ============================================================ */

/* The prototype carried these three on inline style attributes; the
   production markup may not, so they are classes with the same values.
   `.section-header` supplies `margin: 0 auto 72px`, so the auto side
   margins survive and the 640px header box stays centred with its text
   left-aligned — exactly the prototype's computed result. */
/* margin 0: .section-header centres its 700px box, which left the header indented from
   the lead card and river (Kevin, 2026-10-01). Now it starts on the wrap's left edge. */
.blog-head { text-align: left; max-width: 640px; margin: 0 0 44px; }
.blog-head .section-eyebrow { justify-content: flex-start; }
.blog-head .section-title { font-family: 'Fraunces', serif; }

.vb-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px;
  border-radius: 32px;
  background: white;
  box-shadow: var(--shadow-soft);
  margin-bottom: 72px;
}
.vb-lead img { width: 100%; border-radius: 24px; display: block; aspect-ratio: 4/3; object-fit: cover; }
.vb-lead h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  margin: 16px 0 16px;
}
.vb-lead p { color: var(--plum-muted); font-size: 17px; margin-bottom: 22px; }
.vb-lead-cta { margin-top: 22px; }
/* The prototype's lead always had a photo (it picked the newest post that
   had one). A site whose whole first page is image-less still needs a lead,
   so it drops to the single column the 1024 breakpoint already defines. */
.vb-lead.no-image { grid-template-columns: 1fr; }

.vb-body { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }

.vb-river { list-style: none; }
.vb-river li { border-top: 1px solid rgba(45,27,61,0.1); }
.vb-river li:last-child { border-bottom: 1px solid rgba(45,27,61,0.1); }
.vb-river a {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 28px 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s;
}
.vb-river a:hover { background: rgba(255,255,255,0.65); }
.vb-river time {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hot-pink);
  padding-top: 5px;
}
.vb-river time span { opacity: 0.6; }
.vb-river h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8px;
}
.vb-river p { color: var(--plum-muted); font-size: 15px; }

.vb-rail { position: sticky; top: 110px; display: grid; gap: 28px; }
.vb-rail .signup { padding: 28px; text-align: left; border-radius: 24px; }
.vb-rail .signup h3 { font-size: 22px; }
.vb-rail .signup form { flex-direction: column; max-width: none; }
.vb-rail .signup input { width: 100%; }
.vb-card {
  background: white;
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(200,0,255,0.08);
}
.vb-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
}
.vb-tags { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1024px) {
  .vb-body { grid-template-columns: 1fr; }
  .vb-lead { grid-template-columns: 1fr; }
  .vb-rail { position: static; }
}

/* The prototype wrote no mobile step for the index, because its mobile was
   never opened in a browser. At 375px the page's 48px gutters nest inside the
   lead card's 40px padding and leave a 199px measure — the lead title breaks
   across five lines. These are the post page's own mobile numbers (24px
   gutters, ported above at 900px), applied at 700px, which is where the rest
   of the design already steps down. No new values were invented. */
@media (max-width: 700px) {
  .blog-page { padding: 120px 24px 70px; }
  .vb-lead { padding: 24px; gap: 28px; }
  .vb-river a { grid-template-columns: 80px 1fr; gap: 18px; padding: 22px 0; }
}

/* ============================================================
   5. POST PAGE — body typography
   ============================================================ */

.post-body { font-size: 18px; line-height: 1.85; color: var(--plum-soft); }
/* The prototype dropped the body HTML straight into `.post-body`, so a child
   selector was enough. ActionText wraps its output in `.trix-content`, which
   silently breaks `> p` and collapses every paragraph gap in the archive —
   observed in the browser, not in a test. Both shapes are matched on purpose;
   do not "simplify" this back to one selector, and do not widen it to a
   descendant selector, which would also space paragraphs inside captions,
   list items and `.wp-block-columns`. */
.post-body > p,
.post-body > .trix-content > p { margin-bottom: 26px; }
.post-body h2 {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--plum);
  margin: 48px 0 18px;
}
.post-body h3 {
  font-family: 'Fraunces', serif;
  font-size: 23px;
  font-weight: 500;
  color: var(--plum);
  margin: 36px 0 14px;
}
.post-body h4 { font-size: 18px; font-weight: 700; color: var(--plum); margin: 30px 0 12px; }
.post-body a { color: var(--hot-pink); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--purple); }
.post-body strong { color: var(--plum); }
.post-body ul, .post-body ol { margin: 0 0 26px 24px; }
.post-body li { margin-bottom: 10px; }
.post-body blockquote {
  border-left: 3px solid var(--hot-pink);
  padding: 6px 0 6px 26px;
  margin: 34px 0;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--plum);
}
.post-body img { max-width: 100%; height: auto; border-radius: 16px; display: block; }
.post-body figure { margin: 36px 0; }
.post-body figcaption {
  font-size: 13px;
  color: var(--plum-muted);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}
.post-body hr { border: none; border-top: 1px solid rgba(45,27,61,0.12); margin: 44px 0; }

.post-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--plum);
  line-height: 1.15;
}
.post-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--plum-muted);
}
.post-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }

/* Prev / next */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(45,27,61,0.1);
}
.post-nav a {
  padding: 24px;
  border-radius: 20px;
  background: white;
  border: 1px solid rgba(200,0,255,0.08);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}
.post-nav a:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.post-nav span {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hot-pink);
  margin-bottom: 8px;
  font-weight: 600;
}
.post-nav strong { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 500; }
.post-nav .next { text-align: right; }
/* A post with only one neighbour keeps that neighbour in its own half of the
   grid: the newest post's "Previous" stays left, the oldest post's "Next"
   stays right. The prototype always had both. */
.post-nav .next:only-child { grid-column: 2; }
@media (max-width: 700px) { .post-nav { grid-template-columns: 1fr; } .post-nav .next:only-child { grid-column: 1; } }

/* ============================================================
   8b. POST — sticky LEFT rail (variant B): TOC / share / filed under / signup.
       Ported verbatim from prototype-blog.css §7. The two rules marked "was inline"
       replace style="" attributes in the prototype markup (no inline styles).
   ============================================================ */

.pb-head { padding: 140px 48px 48px; background: linear-gradient(135deg, var(--lavender-mist), var(--cream)); }
.pb-head-inner { max-width: 1160px; margin: 0 auto; } /* was inline */
.pb-back { text-decoration: none; } /* was inline */
.pb-head .post-title { font-size: clamp(32px, 4vw, 50px); max-width: 900px; margin: 14px 0 22px; }
/* Featured image under the byline (Kevin, 2026-10-01). Absent = plain gradient header. */
.pb-head-img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 20px; margin-top: 24px; }
.pb-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 72px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 48px 100px;
  align-items: start;
}
.pb-rail { position: sticky; top: 110px; display: grid; gap: 30px; }
.pb-rail h4 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--plum-muted);
  margin-bottom: 12px;
  font-weight: 700;
}
.pb-toc { list-style: none; border-left: 2px solid rgba(200,0,255,0.15); }
.pb-toc a {
  display: block;
  padding: 7px 0 7px 16px;
  font-size: 14px;
  color: var(--plum-muted);
  text-decoration: none;
  margin-left: -2px;
  border-left: 2px solid transparent;
}
.pb-toc a:hover, .pb-toc a.on { color: var(--plum); border-left-color: var(--hot-pink); }
.pb-share { display: flex; gap: 10px; }
.pb-share a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: white;
  border: 1px solid rgba(200,0,255,0.12);
  color: var(--plum-soft);
  text-decoration: none;
}
.pb-share a:hover { background: var(--gradient-cta); color: white; border-color: transparent; }
.pb-rail .signup { padding: 22px; text-align: left; border-radius: 20px; }
.pb-rail .signup h3 { font-size: 18px; }
.pb-rail .signup p { font-size: 13px; margin-bottom: 14px; }
.pb-rail .signup form { flex-direction: column; }
.pb-rail .signup input { width: 100%; font-size: 14px; padding: 11px 16px; }
@media (max-width: 900px) {
  .pb-layout { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px 80px; }
  .pb-rail { position: static; }
}

/* ============================================================
   9. WORDPRESS COMPAT (ticket 02) — classes that survive ActionText
      sanitization but lost their WP theme CSS. ~30 imported posts
      need these or they render wrong. Scoped to .post-body only,
      folded into this sheet rather than shipped as its own.
   ============================================================ */

.post-body .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.post-body img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-body .alignright { float: right; margin: 8px 0 20px 28px; max-width: 50%; }
.post-body .alignleft  { float: left;  margin: 8px 28px 20px 0; max-width: 50%; }
.post-body .alignnone { margin: 24px 0; }
.post-body .alignwide { width: min(100%, 1000px); }
.post-body .has-text-align-center { text-align: center; }
.post-body .has-text-align-right { text-align: right; }
.post-body .has-text-align-left { text-align: left; }

.post-body .wp-block-image { margin: 36px 0; }
.post-body .wp-block-image img { border-radius: 16px; }
/* `style="width:117px"` was stripped by the sanitizer; size classes are what's left */
.post-body .size-thumbnail img { max-width: 180px; }
.post-body .size-medium img { max-width: 400px; }
.post-body .size-large img { max-width: 100%; }
.post-body .is-resized img { max-width: 100%; }
.post-body .wp-element-caption,
.post-body .wp-block-image figcaption {
  font-size: 13px;
  color: var(--plum-muted);
  text-align: center;
  font-style: italic;
  margin-top: 10px;
}

.post-body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.post-body .wp-block-buttons.is-content-justification-center { justify-content: center; }
.post-body .wp-block-button__link {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 100px;
  background: var(--gradient-cta);
  color: white !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
}
.post-body .wp-block-button__link:hover { transform: translateY(-2px); color: white; }

.post-body .wp-block-columns { display: flex; gap: 32px; margin: 32px 0; }
.post-body .wp-block-column { flex: 1; min-width: 0; }
@media (max-width: 700px) { .post-body .wp-block-columns { flex-direction: column; } }

.post-body .wp-block-separator { border-top: 1px solid rgba(45,27,61,0.12); margin: 40px 0; }
.post-body .wp-block-quote { border-left: 3px solid var(--hot-pink); padding-left: 24px; margin: 32px 0; }
.post-body .wp-block-social-links { display: flex; gap: 14px; list-style: none; margin: 24px 0; padding: 0; }
/* Jetpack stripped the <svg> icons; the screen-reader label is now the only text */
.post-body .wp-social-link { font-size: 14px; }
.post-body .screen-reader-text { font-weight: 600; color: var(--hot-pink); }