/* ============================================
   everwilde one — blog post styles
   Used by every page under /blog/[slug]/
   ============================================ */

.article-header{
  padding:140px 0 40px;
  background:var(--paper);
}
.article-header .wrap{max-width:880px;}
.article-header .crumbs{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-soft);
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:10px;
}
.article-header .crumbs a{
  color:var(--green);
  transition:color .2s;
}
.article-header .crumbs a:hover{color:var(--magenta);}
.article-header .crumbs .sep{opacity:0.4;}

.article-header .post-meta-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
}
.article-header .post-meta-top .dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--ink-soft);
  opacity:0.5;
}

.article-header h1{
  font-size:clamp(36px,4.5vw,56px);
  margin-bottom:24px;
  line-height:1.05;
  letter-spacing:-0.025em;
}
.article-header .deck{
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;
  color:var(--ink-soft);
  font-weight:500;
  max-width:680px;
}

.author-strip{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 0;
  border-top:1.5px solid var(--border-light);
  border-bottom:1.5px solid var(--border-light);
  margin-top:36px;
}
.author-strip img.avatar{
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--ink);
}
.author-strip .author-info{display:flex;flex-direction:column;gap:2px;}
.author-strip .author-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--ink);
}
.author-strip .author-role{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
}
.author-strip .author-linkedin{
  margin-left:auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--green);
  border:1.5px solid var(--green);
  padding:8px 14px;
  border-radius:var(--r-pill);
  transition:background .2s, color .2s;
}
.author-strip .author-linkedin:hover{
  background:var(--green);
  color:var(--bone);
}

.article-body{
  padding:48px 0 80px;
  background:var(--paper);
}
.article-body .wrap{max-width:820px;}
.article-body h2{
  font-size:clamp(24px,2.6vw,34px);
  margin-top:48px;
  margin-bottom:20px;
  letter-spacing:-0.02em;
}
.article-body h3{
  font-size:clamp(20px,2vw,24px);
  margin-top:36px;
  margin-bottom:14px;
  letter-spacing:-0.015em;
}
.article-body p{
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
  margin-bottom:20px;
}
/* Lead paragraph (first <p> directly under the .wrap, never inside .post-cta etc) */
.article-body > .wrap > p:first-of-type{
  font-size:20px;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:28px;
}
/* Drop cap — scoped to the lead paragraph only.
   Improved: aligned to cap-height, balanced margins, doesn't crash into line 2. */
.article-body > .wrap > p:first-of-type::first-letter{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  font-size:76px;
  line-height:1;
  float:left;
  margin:6px 14px -4px 0;
  padding:0;
  color:var(--magenta);
  letter-spacing:-0.04em;
}
/* Belt-and-braces: kill the drop cap inside any nested block (CTA, bio, etc.) */
.article-body .post-cta p::first-letter,
.article-body .author-bio p::first-letter{
  font-family:inherit;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
  float:none;
  margin:0;
  padding:0;
  color:inherit;
}
.article-body strong,
.article-body b{color:var(--ink);font-weight:700;}
.article-body em,
.article-body i{font-style:italic;}
.article-body a{
  color:var(--magenta);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  font-weight:600;
  transition:color .2s;
}
.article-body a:hover{color:var(--magenta-deep);}
.article-body ul,
.article-body ol{
  margin:8px 0 24px 0;
  padding-left:24px;
}
.article-body ul li{
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:8px;
  list-style:none;
  position:relative;
  padding-left:20px;
}
.article-body ul li::before{
  content:'';
  position:absolute;
  left:0;top:11px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--magenta);
}
.article-body ol li{
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:8px;
}
.article-body blockquote{
  border-left:4px solid var(--magenta);
  padding:8px 0 8px 24px;
  margin:32px 0;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(22px,2vw,26px);
  line-height:1.3;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-0.015em;
}
.article-body hr{
  border:0;
  border-top:1.5px dashed var(--border-light);
  margin:48px 0;
}
.article-body code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:0.92em;
  background:var(--bone);
  padding:2px 8px;
  border-radius:6px;
  border:1px solid var(--border-light);
}

.author-bio{
  margin-top:48px;
  padding:32px;
  background:var(--bone);
  border:1.5px solid var(--ink);
  border-radius:var(--r-card);
  box-shadow:6px 6px 0 var(--ink);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:start;
}
.author-bio img.avatar{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  border:2.5px solid var(--ink);
}
.author-bio .bio-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--green);
  margin-bottom:10px;
}
.author-bio h3{
  font-size:22px;
  margin-bottom:6px;
  color:var(--ink);
}
.author-bio .bio-role{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.author-bio p{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.author-bio .bio-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.author-bio .bio-links a{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--green);
  border:1.5px solid var(--green);
  padding:6px 12px;
  border-radius:var(--r-pill);
  transition:background .2s, color .2s;
}
.author-bio .bio-links a:hover{
  background:var(--green);
  color:var(--bone);
}

.post-cta{
  margin-top:36px;
  padding:32px;
  background:var(--magenta);
  border-radius:var(--r-card);
  color:var(--bone);
  text-align:center;
}
.post-cta h3{
  color:var(--bone);
  font-size:clamp(22px,2vw,28px);
  margin-bottom:12px;
}
.post-cta p{
  color:rgba(255,255,255,0.92);
  font-size:16px;
  margin-bottom:20px;
}
.post-cta .btn{background:var(--ink);color:var(--bone);}
.post-cta .btn .arrow{background:var(--mustard);}
.post-cta .btn .arrow svg{stroke:var(--ink);}
.post-cta .btn:hover{background:#000;}

.back-to-blog{
  margin-top:48px;
  text-align:center;
}
.back-to-blog a{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:4px;
}
.back-to-blog a:hover{color:var(--magenta);}

@media (max-width: 820px){
  .article-header{padding:110px 0 30px;}
  .article-header h1{font-size:clamp(28px,8vw,40px);}
  .author-strip{flex-wrap:wrap;}
  .author-strip .author-linkedin{margin-left:0;width:100%;text-align:center;}
  .author-bio{grid-template-columns:1fr;text-align:center;}
  .author-bio img.avatar{margin:0 auto;}
  .author-bio .bio-links{justify-content:center;}
  .article-body .wrap{padding:0 24px;}
  .article-body p:first-of-type::first-letter{font-size:48px;}
}