/* website/blog/blog.css — shared stylesheet for website/blog/*.html only.
 *
 * The one deliberate exception to index.html's "always inline CSS" rule
 * (see ../README.md's "Why it's built this way"): at ~12 posts, duplicating
 * ~150+ lines of CSS into every file is a real maintenance cost, and this
 * is still a single same-origin request, cached across every blog page
 * after the first visit — a static site generator would be the wrong
 * scale/fit for a repo whose whole identity is "no build step."
 * index.html itself is untouched by this and keeps its CSS fully inlined.
 *
 * Tokens and base rules are copied from index.html's inline <style>, not
 * reinvented — keep the two in sync by eye if the design tokens change.
 */

:root{
  --bg:#0f172a; --surface:#1e293b; --surface2:#273548; --border:#334155;
  --text:#e2e8f0; --text-muted:#94a3b8; --text-dim:#8b98ad;
  --accent:#3b82f6; --accent2:#1e40af; --accent-hover:#2563eb;
  --green:#22c55e; --yellow:#eab308;
  --radius:12px; --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --container:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px}
h1,h2,h3{line-height:1.15; margin:0 0 16px; letter-spacing:-0.02em}
h2{font-size:clamp(26px,3.6vw,34px)}
h3{font-size:19px}
p{color:var(--text-muted); margin:0 0 16px}
.eyebrow{
  display:inline-block; font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.center{text-align:center}
.lede{font-size:18px; max-width:640px}
.lede.center{margin:0 auto 16px}
.eyebrow.center{display:block; text-align:center}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:var(--radius-sm); text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent-hover); color:#fff; position:relative; overflow:hidden}
.btn-primary:hover{background:#1d4ed8; box-shadow:0 8px 20px -6px rgba(37,99,235,.55)}
.btn-primary::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transition:transform .6s ease;
}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ── Nav ───────────────────────────────────────────────────────────── */
header.site{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(10px);
  background:rgba(15,23,42,.85); border-bottom:1px solid var(--border);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; text-decoration:none}
.brand svg{width:28px; height:28px; flex:none; transition:transform .25s ease}
.brand:hover svg{transform:scale(1.08) rotate(-6deg)}
.nav-links{display:flex; gap:28px; font-size:14px; color:var(--text-muted)}
.nav-links a{text-decoration:none; position:relative; padding-bottom:3px}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--accent); transition:width .2s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
@media (max-width:720px){ .nav-links{display:none} }

/* ── Scroll-reveal + scroll/reading-progress (assets/reveal.js) ─────
   Same progressive-enhancement contract as index.html: hidden state only
   applies once .js is set by the synchronous gate script in <head>. */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:20;
  background:linear-gradient(90deg,var(--accent),var(--green));
  transform:scaleX(0); transform-origin:left; will-change:transform;
}
.js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease}
.js [data-reveal].is-visible{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}

/* ── Page shell ───────────────────────────────────────────────────── */
main{padding:64px 0 96px}
/* --accent alone only clears ~3.4:1 on --surface2, short of WCAG AA's
   4.5:1 — the lighter #60a5fa does (same fix as index.html's .tag.ai). */
.pillar-tag{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:3px 9px; border-radius:99px; background:var(--surface2); color:#60a5fa;
  margin-bottom:12px;
}

/* ── Blog index: featured + grid of post cards ───────────────────── */
.blog-hero{padding:16px 0 8px; text-align:center}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px}
@media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr} }

.post-card{
  display:block; padding:28px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-card:hover{
  transform:translateY(-6px); border-color:transparent;
  box-shadow:0 0 0 1px var(--accent), 0 20px 45px -20px rgba(59,130,246,.45);
}
/* Card titles are h2 for document outline reasons (the page h1 is the blog
   title, so jumping straight to h3 skipped a level). They must not inherit the
   page-level h2 scale — visually these are still card headings. */
.post-card h2{font-size:19px; margin-bottom:8px; color:var(--text)}
.post-card p{font-size:14px; margin:0}

.post-card.featured{
  grid-column:1/-1; display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center;
  padding:40px;
}
@media (max-width:720px){ .post-card.featured{grid-template-columns:1fr} }
.post-card.featured h2{font-size:26px}
.post-card.featured p{font-size:15px}
.post-card.featured .dive-visual{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:20px; font-size:13px; color:var(--text-dim);
}

/* ── Post meta (read time, date, pillar) ─────────────────────────── */
.post-meta{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--text-dim);
  margin-bottom:8px;
}
.post-meta .dot{opacity:.6}

/* ── Post body ────────────────────────────────────────────────────── */
.post-header{max-width:760px; margin:0 auto 40px; text-align:center}
.post-header h1{font-size:clamp(28px,4.2vw,42px)}
.post-body{max-width:720px; margin:0 auto}
.post-body h2{font-size:24px; margin-top:40px}
.post-body h3{margin-top:28px}
.post-body p{font-size:16px; color:var(--text-muted)}
.post-body ul,.post-body ol{color:var(--text-muted); font-size:16px; padding-left:22px}
.post-body li{margin-bottom:8px}
.post-body a{color:var(--accent); text-decoration:underline; text-decoration-color:rgba(59,130,246,.35)}
.post-body a:hover{text-decoration-color:var(--accent)}
.post-body blockquote{
  margin:24px 0; padding:4px 20px; border-left:3px solid var(--accent);
  color:var(--text); font-size:17px;
}
.post-body code{background:var(--surface2); padding:2px 6px; border-radius:4px; font-size:14px}

/* ── Related posts ────────────────────────────────────────────────── */
.related-posts{max-width:720px; margin:56px auto 0}
.related-posts h3{font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:20px}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:600px){ .related-grid{grid-template-columns:1fr} }

/* ── Final CTA (verbatim from index.html) ────────────────────────── */
.cta-band{
  background:linear-gradient(135deg,#1e1b4b,var(--accent2));
  border-radius:20px; padding:64px 40px; text-align:center; margin:64px 24px 0;
  max-width:720px; margin-left:auto; margin-right:auto;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92); margin:0 auto 28px}
.cta-band .btn-primary{background:#fff; color:var(--accent2)}
.cta-band .btn-primary:hover{background:#f1f5f9}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.4); color:#fff}
.cta-band .btn-ghost:hover{border-color:#fff}

/* ── Footer ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); padding:48px 0; margin-top:40px}
footer .wrap{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center}
footer .brand{font-size:14px; color:var(--text-dim)}
footer .brand svg{width:20px; height:20px}
.foot-links{display:flex; gap:24px; font-size:13px; color:var(--text-dim); flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--text)}
.foot-note{font-size:12px; color:var(--text-dim); margin-top:24px; max-width:680px}
/* Breadcrumb trail above a post title. Present on the page, not just in the
   JSON-LD — Google wants the markup to describe navigation a reader can see. */
.crumbs{
  font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:14px;
}
.crumbs a{color:var(--text-muted); text-decoration:none}
.crumbs a:hover{color:var(--accent); text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px; opacity:.5}

/* ── Mid-article install CTA ─────────────────────────────────────────────────
   Sits inside the prose, so it is a bordered aside rather than the full-width
   gradient band that closes a post — it has to read as an offer, not as the
   end of the article. */
.inline-cta{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:20px 22px; margin:36px 0;
}
.inline-cta p{margin:0 0 14px}
.inline-cta strong{color:var(--text)}