/* ── Blog: /blog/ list and the article pages (/<slug>/) ───────
   Articles were copied from WordPress (Elementor) as-is; only the frame
   is new. Shares tokens, nav, footer and the newsletter card with
   styles.css. */

/* Article */
.blog-post{
  padding:72px 0 88px;
  background:
    radial-gradient(900px 380px at 50% -12%, rgba(108,99,255,.08), transparent 70%),
    var(--paper);
}
.blog-post__inner{ max-width:760px; }
.blog-post__back{ display:inline-block; font-size:14.5px; color:var(--body); transition:color .15s ease; }
.blog-post__back:hover{ color:var(--accent-ink); }
.blog-post__title{ margin-top:22px; font-size:clamp(32px,4.2vw,48px); letter-spacing:-0.035em; text-wrap:balance; }
.blog-post__meta{ margin-top:16px; font-size:15px; color:var(--body); }

/* Article body: the copied WordPress HTML. Lists and spacing are reset
   globally in styles.css, so give them back here. */
.prose{ margin-top:40px; padding-top:36px; border-top:1px solid var(--line); color:var(--ink-2); font-size:18px; line-height:1.72; }
.prose > * + *{ margin-top:1.05em; }
.prose h2{ margin-top:1.9em; font-size:clamp(24px,2.6vw,30px); }
.prose h3{ margin-top:1.7em; font-size:clamp(20px,2.2vw,24px); }
.prose h4{ margin-top:1.5em; font-size:19px; }
.prose h2 + *, .prose h3 + *, .prose h4 + *{ margin-top:.6em; }
.prose strong, .prose b{ color:var(--ink); font-weight:600; }
.prose i{ font-style:italic; }
.prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--accent); }
.prose ul, .prose ol{ padding-left:1.4em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:.45em; }
.prose li::marker{ color:var(--accent); }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
.prose blockquote{ margin-left:0; padding-left:20px; border-left:3px solid var(--brand); color:var(--body); }

/* List page */
.blog-hero{
  padding:80px 0 40px;
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(108,99,255,.10), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.blog-hero__title{ margin-top:14px; font-size:clamp(36px,4.6vw,56px); letter-spacing:-0.035em; }
.blog-hero__lede{ margin-top:14px; max-width:52ch; font-size:19px; color:var(--body); }

.blog-list{ padding:24px 0 96px; background:var(--paper-2); }
.blog-list__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.blog-card__link{
  display:flex; flex-direction:column; height:100%;
  padding:28px 28px 24px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.blog-card__link:hover{ border-color:var(--line-2); box-shadow:0 14px 36px rgba(13,17,23,.07); transform:translateY(-2px); }
.blog-card__title{ font-size:22px; letter-spacing:-0.02em; line-height:1.2; }
.blog-card__link:hover .blog-card__title{ color:var(--accent-ink); }
.blog-card__excerpt{ margin-top:10px; flex:1; font-size:15.5px; line-height:1.6; color:var(--body); }
.blog-card__meta{ margin-top:18px; font-size:14px; color:var(--body); }

/* Newsletter card at the bottom of both pages */
.blog-signup{ padding:72px 0 88px; border-top:1px solid var(--line); background:var(--paper); }
.blog-signup__inner{ display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; }
.blog-signup__title{ margin-top:12px; font-size:clamp(26px,3vw,36px); letter-spacing:-0.03em; }
.blog-signup__lede{ margin-top:12px; font-size:17.5px; color:var(--body); max-width:44ch; }
.blog-signup__form{ max-width:100%; }

@media (max-width:860px){
  .blog-post{ padding:48px 0 64px; }
  .prose{ font-size:17px; margin-top:32px; padding-top:28px; }
  .blog-hero{ padding:56px 0 28px; }
  .blog-list__grid{ grid-template-columns:1fr; }
  .blog-card__link{ padding:22px 20px 20px; }
  .blog-signup{ padding:56px 0 64px; }
  .blog-signup__inner{ grid-template-columns:1fr; gap:28px; }
}