/* ParalegalWriters — blog layer. Sits on top of site.css and reuses its tokens. */

.blog-hero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(1200px 320px at 12% -40%, rgba(66,133,244,0.10), transparent 60%),
    var(--panel-2);
  padding-block:56px 44px;
}
.blog-hero .kicker{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--g-blue); margin:0 0 14px;
}
.blog-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px,4.6vw,46px); line-height:1.12; margin:0 0 14px; color:var(--text);
  letter-spacing:-0.01em;
}
.blog-hero h1 em{ font-style:italic; color:var(--g-blue); }
.blog-hero .lede{ margin:0; max-width:64ch; font-size:17px; color:var(--text-dim); }

/* ---------- index listing ---------- */
.post-list{ padding-block:52px 68px; display:grid; gap:20px; }
.post-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:26px 28px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-card:hover{ border-color:var(--g-blue); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:12px;
}
.post-chip{
  display:inline-block; padding:3px 9px; border-radius:999px;
  background:rgba(66,133,244,0.10); color:var(--g-blue-hi); letter-spacing:0.08em; font-weight:600;
}
.post-meta .dot{ color:var(--line); }
.post-card h2{
  font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.25;
  margin:0 0 10px; color:var(--text);
}
.post-card p{ margin:0 0 14px; color:var(--text-dim); font-size:15.5px; max-width:70ch; }
.post-more{ font-size:14px; font-weight:500; color:var(--g-blue-hi); }
.post-more::after{ content:" \2192"; }

.blog-empty{
  border:1px dashed var(--line); border-radius:12px; padding:40px 28px;
  text-align:center; color:var(--text-dim);
}

/* ---------- article ---------- */
.article-wrap{ max-width:760px; margin:0 auto; padding-inline:24px; }
.article-head{ padding-block:48px 8px; }
.crumb{ font-size:13.5px; color:var(--text-faint); margin:0 0 20px; }
.crumb a{ color:var(--g-blue-hi); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }
.article-head h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,4.2vw,40px); line-height:1.16; letter-spacing:-0.01em;
  margin:0 0 16px; color:var(--text);
}
.article-standfirst{ font-size:18px; line-height:1.6; color:var(--text-dim); margin:0 0 22px; }
.byline{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:14px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint);
}

.article-body{ padding-block:34px 10px; font-size:17px; line-height:1.72; color:var(--text); }
.article-body > p{ margin:0 0 22px; }
.article-body h2{
  font-family:var(--font-display); font-weight:700; font-size:25px; line-height:1.25;
  margin:44px 0 14px; color:var(--text); scroll-margin-top:90px;
}
.article-body h3{
  font-family:var(--font-display); font-weight:600; font-size:19.5px;
  margin:32px 0 10px; color:var(--text);
}
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:22px; }
.article-body li{ margin-bottom:9px; }
.article-body a{ color:var(--g-blue-hi); }
.article-body strong{ font-weight:700; }
.article-body blockquote{
  margin:28px 0; padding:4px 0 4px 20px; border-left:3px solid var(--g-blue);
  color:var(--text-dim); font-size:17.5px;
}
.article-body blockquote p{ margin:0; }

.callout{
  border:1px solid var(--line); border-left:4px solid var(--g-yellow);
  background:var(--panel-2); border-radius:8px;
  padding:20px 22px; margin:30px 0; font-size:16px;
}
.callout p{ margin:0 0 10px; }
.callout p:last-child{ margin:0; }
.callout .callout-title{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:8px;
}

.article-body table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:15.5px; }
.article-body th, .article-body td{
  border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top;
}
.article-body th{ background:var(--panel-2); font-weight:700; font-size:14.5px; }

.article-cta{
  margin:48px 0 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2); padding:30px 28px;
}
.article-cta h2{ font-family:var(--font-display); font-size:21px; margin:0 0 10px; }
.article-cta p{ margin:0 0 18px; color:var(--text-dim); font-size:16px; }
.article-cta .btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--brass); color:#fff;
  font-weight:500; font-size:15px; padding:11px 22px; border-radius:6px; text-decoration:none;
}
.article-cta .btn:hover{ background:var(--brass-hi); }

.article-foot{
  margin:44px 0 64px; padding-top:22px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--text-faint);
}
.article-foot a{ color:var(--g-blue-hi); text-decoration:none; }
.article-foot a:hover{ text-decoration:underline; }

.more-posts{ margin:0 0 64px; }
.more-posts h2{ font-family:var(--font-display); font-size:19px; margin:0 0 16px; }
.more-posts ul{ list-style:none; margin:0; padding:0; }
.more-posts li{ border-top:1px solid var(--line); padding-block:14px; }
.more-posts a{ color:var(--text); text-decoration:none; font-weight:500; }
.more-posts a:hover{ color:var(--g-blue-hi); }

@media (max-width:640px){
  .blog-hero{ padding-block:40px 32px; }
  .post-card{ padding:22px 20px; }
  .article-body{ font-size:16.5px; }
  .article-head{ padding-block:34px 6px; }
}