/* ════════════════════════════════════════════════════════════════════
 * GUIDE PAGE TEMPLATE - editorial long-form (Substack DNA)
 * Reuses tokens.css + homepage.css. Reading typography + sticky TOC.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Article hero (light) ── */
.art-hero{ background:var(--bg); padding-block:var(--space-12) var(--space-8); border-bottom:1px solid var(--border-subtle); }
.art-hero-inner{ max-width:820px; margin-inline:auto; }
.art-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-6); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-tertiary); }
.breadcrumb a{ color:var(--text-tertiary); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text-secondary); }
.breadcrumb .sep{ color:var(--border-default); }
.breadcrumb [aria-current]{ color:var(--text-secondary); }
.cat-pill{ font-size:11px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:#fff; background:var(--brand-purple); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); white-space:nowrap; }
.art-h1{ font-size:clamp(34px,5vw,56px); line-height:1.08; letter-spacing:var(--tracking-tight); margin-bottom:var(--space-6); text-wrap:balance; }
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); font-size:var(--text-body-sm); color:var(--text-secondary); }
.byline-av{ width:32px; height:32px; border-radius:var(--radius-full); background:linear-gradient(135deg,#8B5CF6,#3B82F6); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:var(--weight-bold); font-size:13px; flex:none; }
.byline .dot{ color:var(--border-default); }
.byline-li{ color:var(--text-tertiary); display:inline-flex; }
.byline-li:hover{ color:var(--brand-blue); }
.byline-li svg{ width:18px; height:18px; }

/* ── Article layout: 2-col w/ sticky TOC ── */
.art-layout{ background:var(--bg); padding-block:var(--space-12) var(--space-20); }
.art-grid{ max-width:1080px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-10); }
@media (min-width:1024px){ .art-grid{ grid-template-columns:minmax(0,1fr) 240px; gap:var(--space-16); align-items:start; } }

/* TOC */
.toc-mobile{ margin-bottom:var(--space-8); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-subtle); }
@media (min-width:1024px){ .toc-mobile{ display:none; } }
.toc-mobile summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); font-weight:var(--weight-semibold); font-size:var(--text-body-sm); color:var(--text-primary); }
.toc-mobile summary::-webkit-details-marker{ display:none; }
.toc-mobile summary::after{ content:'+'; color:var(--text-tertiary); font-size:20px; }
.toc-mobile[open] summary::after{ content:'–'; }
.toc-mobile ol{ margin:0; padding:0 var(--space-5) var(--space-4) var(--space-6); }
.toc-aside{ display:none; }
@media (min-width:1024px){ .toc-aside{ display:block; position:sticky; top:96px; } }
.toc-label{ font-size:var(--text-caption); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--space-4); }
.toc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-1); border-left:2px solid var(--border-subtle); }
.toc-list li{ margin:0; }
.toc-list a{ display:block; padding:var(--space-2) var(--space-4); margin-left:-2px; border-left:2px solid transparent; font-size:var(--text-body-sm); color:var(--text-secondary); text-decoration:none; line-height:var(--leading-snug); }
.toc-list a:hover{ color:var(--brand-purple); border-left-color:var(--brand-purple); }
.toc-mobile ol{ list-style:none; }
.toc-mobile ol li{ margin-bottom:var(--space-2); }
.toc-mobile ol a{ font-size:var(--text-body-sm); color:var(--text-secondary); text-decoration:none; }
.toc-mobile ol a:hover{ color:var(--brand-purple); }

/* ── Prose ── */
.prose{ max-width:720px; min-width:0; overflow-wrap:break-word; }
.prose .lede{ font-size:var(--text-body-lg); line-height:var(--leading-relaxed); color:var(--text-primary); margin-bottom:var(--space-8); }
.prose h2{ font-size:clamp(26px,3.4vw,32px); font-weight:var(--weight-bold); letter-spacing:-0.015em; line-height:var(--leading-snug); margin:var(--space-12) 0 var(--space-4); scroll-margin-top:92px; }
.prose h3{ font-size:clamp(20px,2.6vw,24px); font-weight:var(--weight-semibold); line-height:var(--leading-snug); margin:var(--space-8) 0 var(--space-3); }
.prose p{ font-size:18px; line-height:1.7; color:var(--text-secondary); margin-bottom:var(--space-5); }
.prose p strong{ color:var(--text-primary); font-weight:var(--weight-semibold); }
.prose ul, .prose ol{ font-size:18px; line-height:1.7; color:var(--text-secondary); margin:0 0 var(--space-5); padding-left:var(--space-6); }
.prose li{ margin-bottom:var(--space-2); }
.prose a:not(.btn){ color:var(--brand-blue); text-decoration:underline; text-underline-offset:2px; }
.prose a:not(.btn):hover{ color:var(--brand-blue-hover); }
@media (max-width:560px){ .prose p, .prose ul, .prose ol{ font-size:16px; } }

/* callout boxes */
.callout{ background:var(--brand-purple-light); border-left:4px solid var(--brand-purple); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); margin:var(--space-8) 0; }
.callout-label{ font-size:var(--text-caption); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple-hover); margin-bottom:var(--space-2); }
.callout p{ margin:0; font-size:var(--text-body); color:var(--text-primary); line-height:var(--leading-relaxed); }

/* pull quote */
.pullquote{ border-left:3px solid var(--brand-purple); padding:var(--space-2) 0 var(--space-2) var(--space-6); margin:var(--space-10) 0; }
.pullquote p{ font-family:var(--font-display); font-size:clamp(22px,3vw,28px); font-style:italic; font-weight:var(--weight-medium); line-height:var(--leading-snug); color:var(--text-primary); margin:0; }
.pullquote cite{ display:block; font-family:var(--font-body); font-style:normal; font-size:var(--text-body-sm); color:var(--text-tertiary); margin-top:var(--space-3); }

/* inline mid-content CTA */
.inline-cta{ max-width:600px; margin:var(--space-10) auto; background:var(--brand-purple-light); border:1px solid #ddd6fe; border-radius:var(--radius-xl); padding:var(--space-6) var(--space-8); text-align:center; }
.inline-cta p{ font-family:var(--font-display); font-size:var(--text-h4); font-weight:var(--weight-semibold); color:var(--text-primary); margin:0 0 var(--space-4); line-height:var(--leading-snug); }

/* inline data viz */
.figure{ margin:var(--space-10) 0; }
.figure-card{ background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); }
.figure-title{ font-size:var(--text-caption); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--space-5); }
.viz-bars{ display:flex; align-items:flex-end; gap:var(--space-4); height:200px; }
.viz-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); height:100%; justify-content:flex-end; }
.viz-bar{ width:100%; max-width:64px; background:var(--brand-gradient); border-radius:var(--radius-sm) var(--radius-sm) 0 0; position:relative; }
.viz-val{ font-family:var(--font-mono); font-size:var(--text-body-sm); font-weight:var(--weight-bold); color:var(--text-primary); }
.viz-cap{ font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); text-align:center; line-height:1.3; }
.figure figcaption{ font-size:var(--text-caption); color:var(--text-tertiary); font-style:italic; margin-top:var(--space-4); text-align:center; }

/* ── Author bio box ── */
.author-box{ background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:var(--space-8); margin-top:var(--space-16); display:flex; flex-direction:column; gap:var(--space-4); max-width:720px; }
@media (min-width:560px){ .author-box{ flex-direction:row; } }
.author-av{ width:64px; height:64px; border-radius:var(--radius-full); background:linear-gradient(135deg,#8B5CF6,#3B82F6); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:var(--weight-black); font-size:24px; flex:none; }
.author-name{ font-size:var(--text-h4); margin-bottom:2px; }
.author-role{ font-size:var(--text-body-sm); color:var(--brand-purple); font-weight:var(--weight-semibold); margin-bottom:var(--space-3); }
.author-bio{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-3); }
.author-links{ display:flex; align-items:center; gap:var(--space-4); }
.author-links a{ font-size:var(--text-body-sm); font-weight:var(--weight-medium); display:inline-flex; align-items:center; gap:var(--space-1); }
.author-links svg{ width:16px; height:16px; }

/* ── Related guides ── */
.guide-card{ display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); text-decoration:none; color:inherit; transition:box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.guide-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--brand-blue); transform:translateY(-2px); text-decoration:none; }
.guide-card .gc-cat{ font-size:11px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); margin-bottom:var(--space-3); }
.guide-card h3{ font-size:var(--text-h4); line-height:var(--leading-snug); margin-bottom:var(--space-4); }
.guide-card .gc-meta{ display:flex; align-items:center; gap:var(--space-2); margin-top:auto; font-size:var(--text-caption); color:var(--text-tertiary); }
.gc-thumb{ width:24px; height:24px; border-radius:var(--radius-full); background:linear-gradient(135deg,#8B5CF6,#3B82F6); flex:none; }

/* ── Newsletter ── */
.newsletter{ background:var(--bg-subtle); }
.newsletter-inner{ max-width:720px; margin-inline:auto; text-align:center; }
.newsletter h3{ font-size:var(--text-h3); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-3); }
.newsletter p{ font-size:var(--text-body); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-6); }
.newsletter-form{ display:flex; flex-direction:column; gap:var(--space-3); max-width:480px; margin:0 auto var(--space-4); }
@media (min-width:480px){ .newsletter-form{ flex-direction:row; } }
.newsletter-input{ flex:1; font-family:var(--font-body); font-size:var(--text-body); color:var(--text-primary); background:var(--bg); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:48px; }
.newsletter-input:focus{ outline:none; border-color:var(--brand-blue); box-shadow:var(--shadow-focus-ring); }
.newsletter-cap{ font-size:var(--text-caption); color:var(--text-tertiary); }

/* ── Agency CTA block ── */
.guide-agency{ background:var(--bg); }
.guide-agency-card{ position:relative; max-width:820px; margin-inline:auto; background:var(--bg-dark); border-radius:var(--radius-2xl); padding:var(--space-12) var(--space-8); text-align:center; overflow:hidden; }
.guide-agency-card::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:360px; background:radial-gradient(ellipse, rgba(124,58,237,.28) 0%, transparent 70%); pointer-events:none; }
.guide-agency-card > *{ position:relative; z-index:1; }
.guide-agency-card .eyebrow{ color:var(--brand-glow); }
.guide-agency-card h2{ color:var(--text-on-dark); font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.guide-agency-card p{ color:var(--text-mid-dark); font-size:var(--text-body-lg); line-height:var(--leading-relaxed); max-width:520px; margin:0 auto var(--space-8); }

/* ════════════ PROSE TABLES ════════════ */
.prose table{ width:100%; border-collapse:collapse; margin:var(--space-6) 0; font-size:var(--text-body-sm); line-height:var(--leading-snug); border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; }
.prose thead th{ background:var(--bg-subtle); text-align:left; font-weight:700; color:var(--text-primary); font-size:var(--text-caption); text-transform:uppercase; letter-spacing:var(--tracking-wide); }
.prose th, .prose td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-default); vertical-align:top; text-align:left; }
.prose tbody tr:nth-child(even){ background:color-mix(in srgb, var(--bg-subtle) 55%, transparent); }
.prose tbody tr:last-child td{ border-bottom:0; }
.prose td:first-child{ font-weight:600; color:var(--text-primary); }
@media (max-width:640px){
  .prose table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}