/* =============================================================
   2k Web Developments — Blog stylesheet
   Loads AFTER areas.css: areas.css supplies the shared header /
   footer / nav / button / .wrap / breadcrumb chrome (global
   selectors); this file defines the design tokens on body.blog
   (so that shared chrome resolves its var()s) and every
   blog-specific component. Scoped under body.blog so it shares
   the page with nothing else. Mobile-first.
   Design system parity: Sora / Manrope / JetBrains Mono, the
   --purple #A435EF palette, light content on the dark chrome.
   ============================================================= */

/* Design tokens — mirrors the areas.css set so the shared header/footer
   (styled with these var()s in areas.css) render correctly on blog pages. */
body.blog{
  --void:#120A1F; --void-2:#0B0613; --purple:#A435EF; --violet:#7B2CBF; --purple-on-dark:#C77DFF;
  --cyan:#22D3EE; --mist:#FAF8FE; --mist-2:#F2ECFA; --ink:#1A1228;
  --ink-soft:#5C5470; --ink-faint:#6F6783; --off:#ECE6F7; --off-soft:#A99FC4;
  --bd-l:rgba(26,18,40,.10); --bd-input:#8A8398; --r:14px; --r-lg:20px; --max:820px;
  --grad:linear-gradient(135deg,#7B2CBF 0%,#A435EF 100%);
  font-family:'Manrope',-apple-system,sans-serif;background:var(--mist);
  color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.blog h1,body.blog h2,body.blog h3{
  font-family:'Sora',sans-serif;line-height:1.16;letter-spacing:-.02em;font-weight:700;color:var(--ink);
}
/* Article + hub column is narrower than the marketing --max for readable measure. */
body.blog .wrap{max-width:var(--max)}

/* ---- Hub hero + post header (dark band, matches the area hero) ---- */
body.blog .blog-hero,
body.blog .post-head{
  background:var(--void);color:#fff;padding:64px 0 40px;margin-bottom:8px;
  border-bottom:1px solid rgba(164,53,239,.18);
}
body.blog .post-head{padding:56px 0 28px}
body.blog .blog-hero .eyebrow,
body.blog .post-head .eyebrow{color:var(--purple-on-dark)}
body.blog .blog-hero h1,
body.blog .post-head h1{color:#fff;font-size:clamp(30px,5vw,46px);margin:12px 0 14px}
body.blog .blog-hero .lede{font-size:18px;color:var(--off);max-width:60ch}
body.blog .post-meta{font-family:'JetBrains Mono',monospace;font-size:13px;
  letter-spacing:.04em;color:var(--off-soft)}

/* ---- Article body ---- */
body.blog .post{padding:8px 0 56px}
body.blog .post-section{margin:34px 0}
body.blog .post-section h2{font-size:clamp(22px,2.8vw,30px);margin:0 0 14px}
body.blog .post-section p{font-size:17.5px;color:var(--ink-soft);margin-bottom:16px}
body.blog .post-section p:last-child{margin-bottom:0}

/* ---- Intro / lead-in (between the answer box and the first H2) ---- */
body.blog .post-intro{margin:26px 0 8px}
body.blog .post-intro p{font-size:18.5px;color:var(--ink);margin-bottom:16px;line-height:1.6}
body.blog .post-intro p:first-child{font-size:19.5px}
body.blog .post-intro p:last-child{margin-bottom:0}

/* ---- Answer-box callout ---- */
body.blog .answer{
  margin:28px 0;padding:22px 24px;border-radius:var(--r-lg);
  background:var(--mist-2);border:1px solid rgba(164,53,239,.22);
  border-left:4px solid var(--purple);box-shadow:0 6px 22px rgba(164,53,239,.08);
}
body.blog .answer-label{display:block;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);margin-bottom:8px}
body.blog .answer p{font-size:17.5px;color:var(--ink);margin:0;line-height:1.6}

/* ---- Comparison table (scrolls on narrow screens, never the page) ---- */
body.blog .table-wrap{margin:30px 0;overflow-x:auto;border-radius:var(--r);
  border:1px solid var(--bd-l)}
body.blog table.cmp{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
body.blog table.cmp th,
body.blog table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--bd-l)}
body.blog table.cmp thead th{background:var(--void);color:#fff;font-family:'Sora',sans-serif;
  font-weight:600;font-size:14px}
body.blog table.cmp tbody tr:nth-child(even){background:var(--mist-2)}
body.blog table.cmp tbody tr:last-child td{border-bottom:0}
body.blog table.cmp td:first-child{font-weight:600;color:var(--ink)}

/* ---- FAQ ---- */
body.blog .faq{margin:40px 0}
body.blog .faq h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:16px}
body.blog .faq details{border:1px solid var(--bd-l);border-radius:var(--r);
  padding:4px 18px;margin-bottom:12px;background:#fff}
body.blog .faq summary{font-family:'Sora',sans-serif;font-weight:600;font-size:16.5px;
  color:var(--ink);padding:14px 0;cursor:pointer;list-style:none;position:relative;
  padding-right:28px}
body.blog .faq summary::-webkit-details-marker{display:none}
body.blog .faq summary::after{content:"+";position:absolute;right:2px;top:12px;
  font-size:22px;font-weight:400;color:var(--purple);transition:transform .2s}
body.blog .faq details[open] summary::after{transform:rotate(45deg)}
body.blog .faq details p{font-size:16px;color:var(--ink-soft);padding:0 0 16px;margin:0}

/* ---- E-E-A-T byline card ---- */
body.blog .byline{display:flex;gap:18px;align-items:flex-start;margin:44px 0 8px;
  padding:22px 24px;border-radius:var(--r-lg);background:var(--mist-2);
  border:1px solid var(--bd-l)}
/* Byline avatar uses img/adam-avatar.webp — a dedicated 320x320 square cropped
   from the source portrait with the face centred on BOTH axes (the tall
   352x700 adam.webp can't be centred both ways with object-position alone).
   The square is pre-centred, so object-position stays at the default 50% 50%.
   (adam.webp itself is unchanged — still the about.html portrait + Person schema
   image.) */
body.blog .byline img{width:72px;height:72px;border-radius:50%;flex:0 0 auto;
  object-fit:cover;box-shadow:0 0 0 3px rgba(164,53,239,.28)}
body.blog .byline-name{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:var(--ink)}
body.blog .byline-role{font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.06em;color:var(--purple);margin:2px 0 8px}
body.blog .byline-bio{font-size:15px;color:var(--ink-soft);margin-bottom:8px;line-height:1.55}
body.blog .byline-link{font-weight:600;font-size:14.5px;color:var(--violet)}
body.blog .byline-link:hover{color:var(--purple)}

/* ---- Related links ---- */
body.blog .related{margin:36px 0 0}
body.blog .related h2{font-size:20px;margin-bottom:14px}
body.blog .related-links{display:flex;flex-wrap:wrap;gap:10px}
body.blog .related-links a{display:inline-flex;align-items:center;padding:11px 18px;
  border-radius:999px;border:1.5px solid var(--bd-l);font-weight:600;font-size:14.5px;
  color:var(--ink);background:#fff;transition:.2s}
body.blog .related-links a:hover{border-color:var(--violet);color:var(--violet);
  transform:translateY(-1px)}

/* ---- Hub post grid ---- */
body.blog .blog-list{padding:36px 0 60px}
body.blog .post-grid{display:grid;gap:20px;grid-template-columns:1fr}
body.blog .post-card{display:block;padding:24px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--bd-l);transition:.22s}
body.blog .post-card:hover{border-color:var(--violet);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(123,44,191,.12)}
body.blog .post-card h2{font-size:20px;margin-bottom:8px}
body.blog .post-card p{font-size:15.5px;color:var(--ink-soft);margin-bottom:14px;line-height:1.55}
body.blog .card-more{font-weight:600;font-size:14px;color:var(--violet)}

/* ---- Tablet / desktop ---- */
@media (min-width:720px){
  body.blog .post-grid{grid-template-columns:repeat(2,1fr)}
}