/* ============================================
   Blog article shared stylesheet
   ============================================ */

.article-hero{padding:64px 40px 40px;background:var(--bg-2);border-bottom:1px solid var(--rule)}
.article-hero-inner{max-width:800px;margin:0 auto}
.article-hero .breadcrumb{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.article-hero .breadcrumb a{color:var(--muted)}
.article-hero .breadcrumb a:hover{color:var(--accent)}
.article-hero .cat{display:inline-block;background:var(--accent-tint);color:var(--accent);padding:6px 14px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:20px}
.article-hero h1{font-family:'Fraunces',serif;font-size:56px;line-height:1.02;letter-spacing:-0.03em;font-weight:400;margin-bottom:20px;text-wrap:balance}
.article-hero h1 em{font-style:italic;color:var(--accent)}
.article-hero .dek{font-family:'Fraunces',serif;font-size:22px;line-height:1.5;color:var(--ink-2);margin-bottom:32px;font-weight:400}

.article-byline{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--rule)}
.article-byline .av{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:18px;font-weight:500;overflow:hidden}
.article-byline .av img{width:100%;height:100%;object-fit:cover}
.article-byline strong{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);font-weight:500;letter-spacing:-0.01em;display:block}
.article-byline .meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;margin-top:2px}

/* BODY */
.article-body{padding:64px 40px 96px}
.article-body-inner{max-width:720px;margin:0 auto}
.article-body p,.article-body ul,.article-body ol{font-family:'Instrument Sans',sans-serif;font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 24px}
.article-body h2{font-family:'Fraunces',serif;font-size:36px;line-height:1.15;letter-spacing:-0.02em;font-weight:500;color:var(--ink);margin:56px 0 20px;text-wrap:balance}
.article-body h2 em{font-style:italic;color:var(--accent)}
.article-body h3{font-family:'Fraunces',serif;font-size:24px;line-height:1.25;letter-spacing:-0.02em;font-weight:500;color:var(--ink);margin:40px 0 12px}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{color:var(--accent-deep)}
.article-body ul,.article-body ol{padding-left:24px}
.article-body li{margin-bottom:10px}
.article-body blockquote{margin:32px 0;padding:24px 32px;border-left:3px solid var(--accent);background:var(--bg-2);border-radius:0 var(--card-radius) var(--card-radius) 0;font-family:'Fraunces',serif;font-size:20px;line-height:1.5;color:var(--ink);font-style:italic;font-weight:400}
.article-body blockquote p{font-family:'Fraunces',serif;font-size:20px;color:var(--ink);margin:0}

/* Callout */
.article-body .callout{background:var(--surface);border:1px solid var(--rule);border-radius:var(--card-radius);padding:24px 28px;margin:32px 0}
.article-body .callout h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px;font-weight:600}
.article-body .callout p:last-child{margin-bottom:0}

/* Example box */
.article-body .example{background:var(--bg-2);border-radius:var(--card-radius);padding:24px 28px;margin:32px 0;border-left:3px solid var(--accent-2)}
.article-body .example h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-2);margin:0 0 12px;font-weight:600}
.article-body .example p:last-child{margin-bottom:0}
.article-body .example .math{font-family:'JetBrains Mono',monospace;background:var(--surface);padding:16px 20px;border-radius:6px;margin:12px 0;font-size:14px;line-height:1.8;color:var(--ink)}

/* Divider */
.article-body hr{border:0;border-top:1px solid var(--rule);margin:56px 0}

/* CTA at bottom */
.article-cta{background:linear-gradient(135deg,#4F2D84 0%,#3a1f66 100%);color:#fff;padding:64px 40px;margin:80px -40px -96px}
.article-cta-inner{max-width:720px;margin:0 auto;text-align:center}
.article-cta h3{font-family:'Fraunces',serif;font-size:36px;line-height:1.15;letter-spacing:-0.02em;font-weight:400;color:#fff;margin-bottom:16px}
.article-cta h3 em{font-style:italic;color:#e0d4f5}
.article-cta p{color:rgba(255,255,255,0.8);font-family:'Fraunces',serif;font-size:17px;margin-bottom:28px}
.article-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.article-cta .btn{background:#fff;color:var(--accent-deep)}
.article-cta .btn:hover{background:#f5efdd}
.article-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.3)}
.article-cta .btn-ghost:hover{background:rgba(255,255,255,0.08);color:#fff}

/* Related articles */
.related{padding:80px 40px;background:var(--bg-2)}
.related-inner{max-width:1280px;margin:0 auto}
.related h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;font-weight:600}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--card-radius);padding:24px;text-decoration:none;color:inherit;transition:all 0.2s ease;display:block}
.related-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.related-card .cat{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.related-card h5{font-family:'Fraunces',serif;font-size:19px;font-weight:500;letter-spacing:-0.01em;line-height:1.25;color:var(--ink);margin:0}

@media (max-width:900px){
  .article-hero,.article-body,.related{padding-left:24px;padding-right:24px}
  .article-hero h1{font-size:36px}
  .article-hero .dek{font-size:18px}
  .article-body p,.article-body ul,.article-body ol{font-size:16px}
  .article-body h2{font-size:26px}
  .article-body h3{font-size:20px}
  .article-cta{margin:60px -24px -96px;padding:48px 24px}
  .article-cta h3{font-size:26px}
  .related-grid{grid-template-columns:1fr}
}