/* =============================================================
   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','Manrope Fallback',system-ui,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','Sora Fallback',system-ui,sans-serif;line-height:1.16;letter-spacing:-.02em;font-weight:700;color:var(--ink);
}
/* The footer headings are h2 for outline order; blog.css's dark-on-light heading
   colour must not reach them. */
body.blog footer .foot-col h2{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;line-height:1.65}
/* Article + hub column is narrower than the marketing --max for readable measure. */
body.blog .wrap{max-width:var(--max)}
/* ...but the header nav must keep the full-width marketing measure (area-page width),
   not the narrow article column, so links + quote button don't crowd. */
body.blog .site-header .wrap{max-width:1100px}

/* ---- 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(--violet);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-wrap:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
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','Sora Fallback',system-ui,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','Sora Fallback',system-ui,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','Sora Fallback',system-ui,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(--violet);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(--violet);text-decoration:underline;text-underline-offset:3px}

/* ---- 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 h3{font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-weight:700;
  font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0 0 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)}

/* ---- Dates, topics, toolbar (roadmap 6.8) ---- */
body.blog .post-grid{list-style:none;margin:0;padding:0;counter-reset:none}
body.blog .post-item[hidden]{display:none}
body.blog .card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
body.blog .card-date,body.blog .card-updated{font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--ink-faint);font-variant-numeric:tabular-nums}
body.blog .card-updated{padding-left:12px;border-left:1px solid var(--bd-l)}
body.blog .blog-toolbar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:14px 20px;margin:0 0 22px}
body.blog .blog-count{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin:0;display:flex;
  flex-wrap:wrap;gap:6px 12px;align-items:baseline}
body.blog .blog-updated{font-weight:400;letter-spacing:.06em;text-transform:none}
body.blog .tag-row{display:flex;flex-wrap:wrap;gap:8px}
body.blog .tag-chip{font-family:'Manrope','Manrope Fallback',system-ui,sans-serif;font-size:13.5px;
  font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--bd-l);
  border-radius:999px;padding:8px 14px;min-height:36px;cursor:pointer;transition:.18s}
body.blog .tag-chip:hover{border-color:var(--violet);color:var(--violet)}
body.blog .tag-chip.is-on{background:var(--violet);border-color:var(--violet);color:#fff}
body.blog .tag-chip .tag-n{opacity:.65;font-variant-numeric:tabular-nums;margin-left:2px}
body.blog .tag-status{font-size:14px;color:var(--ink-faint);margin:0 0 14px;min-height:1em}
body.blog .tag-status:empty{margin:0}
body.blog .blog-empty{font-size:16px;color:var(--ink-soft);padding:26px 0}
/* No JS: the chips cannot filter, so do not offer them as if they could. */
html:not(.js) body.blog .tag-row,html:not(.js) body.blog .tag-status{display:none}

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

/* =============================================================
   UI/UX polish pass (2026-07) — purely additive, layered on top
   of the base above. Reading-progress bar, hero/section depth,
   featured lead card + category tags on the hub. Every base rule
   still applies; these refine on top (source order wins).
   ============================================================= */

/* Reading-progress bar — progressive enhancement; absent where unsupported */
@supports (animation-timeline: scroll()){
  body.blog::before{
    content:"";position:fixed;top:0;left:0;width:100%;height:3px;z-index:60;
    background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
    animation:blog-progress linear both;animation-timeline:scroll(root);
  }
  @keyframes blog-progress{to{transform:scaleX(1)}}
}
/* areas.css's global animation-duration:.001ms!important collapses this
   scroll-driven animation to a permanent scaleX(1). A progress indicator is
   motion; under reduced-motion it should simply not exist. */
@media (prefers-reduced-motion:reduce){
  body.blog::before{display:none}
}

/* Hero / post header: soft purple glow + gradient underline for depth */
body.blog .blog-hero,
body.blog .post-head{
  position:relative;overflow:hidden;border-bottom:0;
  background:radial-gradient(130% 130% at 88% -25%,rgba(164,53,239,.26),transparent 55%),var(--void);
}
body.blog .blog-hero::after,
body.blog .post-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(164,53,239,.6),rgba(34,211,238,.32),transparent);
}
body.blog .blog-hero > .wrap,
body.blog .post-head > .wrap{position:relative;z-index:1}

/* Section headings: small gradient tick for scannable rhythm + more air */
body.blog .post-section{margin:44px 0}
body.blog .post-section h2::before{
  content:"";display:block;width:34px;height:3px;border-radius:3px;
  background:var(--grad);margin-bottom:15px;
}

/* Answer box: a little more lift */
body.blog .answer{box-shadow:0 12px 32px rgba(164,53,239,.11)}

/* ---- Richer hub cards ---- */
body.blog .post-card{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(26,18,40,.05);
}
body.blog .post-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:0 0;transition:transform .24s;
}
body.blog .post-card:hover::before{transform:scaleY(1)}
body.blog .post-card:hover{box-shadow:0 16px 38px rgba(123,44,191,.16)}
body.blog .card-tag{
  display:inline-block;align-self:flex-start;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);
  background:rgba(164,53,239,.09);border:1px solid rgba(164,53,239,.22);
  padding:4px 11px;border-radius:999px;margin-bottom:14px;
}
body.blog .post-card .card-more{margin-top:auto;transition:.2s}
body.blog .post-card:hover .card-more{color:var(--purple)}

/* Featured lead card (first in the grid) on tablet / desktop */
@media (min-width:720px){
  body.blog .post-grid > .post-card:first-child{
    grid-column:1 / -1;background:linear-gradient(180deg,#fff,#FBF7FF);
    padding:30px 32px;
  }
  body.blog .post-grid > .post-card:first-child .card-tag{background:rgba(164,53,239,.13)}
  body.blog .post-grid > .post-card:first-child h2{font-size:29px;max-width:24ch}
  body.blog .post-grid > .post-card:first-child p{font-size:17px;max-width:70ch}
}

/* FAQ: gentle open/hover affordance */
body.blog .faq details{transition:border-color .2s,box-shadow .2s}
body.blog .faq details[open]{border-color:rgba(164,53,239,.30);box-shadow:0 8px 24px rgba(164,53,239,.07)}
body.blog .faq summary:hover{color:var(--violet)}

/* Related: separated with a divider */
body.blog .related{border-top:1px solid var(--bd-l);padding-top:30px}