/* ============================================================================
   Standalone server-rendered ARTICLE page (crawlable for SEO / AEO / GEO).
   Loaded after brand.css on pages/article.php.
   ============================================================================ */

/* Dark hero */
.article-hero{background:var(--teal-900);color:#EAF3F0;padding:46px 0 40px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);}
.article-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;border:1.5px solid rgba(201,162,75,.14);}
.article-hero .crumb,.article-hero .crumb a{color:#9DB5AF;}
.article-hero .a-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-300);margin:18px 0 14px;}
.article-hero h1{color:#fff;font-family:var(--serif);font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.015em;max-width:22ch;}
.article-hero .a-dek{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,20px);color:#C2D8D2;margin-top:18px;max-width:60ch;line-height:1.5;position:relative;z-index:1;}

/* Reading column */
.article-wrap{max-width:760px;margin:0 auto;padding:40px 32px 56px;}
.article-body{min-width:0;}
.article-body>p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin:0 0 18px;}
.article-body h3{font-family:var(--serif);font-size:24px;margin:34px 0 14px;color:var(--ink);}
.article-body strong{color:var(--ink);}

/* Answer-first callout (AEO) */
.r-answer{background:var(--teal-100);border:1px solid var(--teal-300);border-left:3px solid var(--teal-700);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 28px;}
.r-answer .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-700);display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.r-answer .l::before{content:"";width:16px;height:1.5px;background:var(--teal-700);}
.r-answer p{font-size:17.5px;line-height:1.62;color:var(--ink);margin:0;font-weight:500;}

/* Trends / signals + FAQ items */
.r-trend{padding:16px 0;border-top:1px solid var(--line);}
.r-trend strong{display:block;margin-bottom:6px;font-size:17px;}
.r-trend p{font-size:15.5px;line-height:1.72;color:var(--muted);margin:0 0 11px;}
.r-trend p:last-child{margin-bottom:0;}

/* The Vinayakam view */
.r-impl{background:var(--teal-100);border-left:3px solid var(--teal-700);border-radius:14px;padding:22px 24px;margin:26px 0;}
.r-impl .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700);margin-bottom:10px;}
.r-impl p{font-size:15.5px;color:var(--teal-900);margin:0;line-height:1.7;}

/* Checklist */
.r-check{border:1px dashed var(--line-strong);border-radius:14px;padding:22px 24px;margin:26px 0;}
.r-check h4{font-size:15px;margin:0;}
.r-check ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px;}
.r-check li{display:flex;gap:11px;font-size:15px;color:var(--ink-soft);line-height:1.5;}
.r-check li::before{content:"";flex:none;width:19px;height:19px;border-radius:6px;background:var(--teal-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5A4D' stroke-width='3'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center;margin-top:1px;}

/* Tags */
.r-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}

/* Footer CTA within article */
.article-cta{margin-top:34px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper-2);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.article-cta .t{font-family:var(--serif);font-size:20px;color:var(--ink);}
.article-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--teal-700);margin-bottom:4px;}

@media(max-width:620px){.article-wrap{padding:32px 20px 48px;}}