/* ──────────────────────────────────────────────
   Blog post — reading-mode overrides
   Loaded AFTER main.css on post-*.html only.
   Goal: calm background, readable prose, no cursor tricks.
   ────────────────────────────────────────────── */

:root {
  --post-ink:    #07031a;
  --post-ink-2:  #0b0624;
  --post-rule:   rgba(201, 168, 255, 0.10);
  --post-text:   #ece3ff;       /* brighter than --pearl-dim for body */
  --post-text-2: #cbbee6;       /* secondary (captions, meta) */
  --post-accent: #c9a8ff;       /* same as --bio */
}

/* Tone the page down — reading, not theatre. */
html, body { background: var(--post-ink); }
body { cursor: auto; }                 /* allow text selection without a phantom cursor */
.cursor, .cursor-dot { display: none !important; }

/* Kill the three.js scene + particle caustics on post pages — they distract. */
#bg-canvas { display: none !important; }
.bg-caustics, .bg-grain, .bg-vignette { display: none !important; }

/* Keep a very subtle atmosphere so the page isn't flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(107, 42, 232, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(94, 240, 255, 0.04) 0%, transparent 55%);
}

main { position: relative; z-index: 2; }

/* ── Reading progress bar ────────────────────── */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--post-accent), #5ef0ff);
  z-index: 9000;
  transition: width 0.12s linear;
  box-shadow: 0 0 12px rgba(201, 168, 255, 0.45);
}

/* ── Hero / header ───────────────────────────── */
.page-hero {
  padding: 140px 32px 44px;
  max-width: 760px;
}
.page-hero .eyebrow {
  color: var(--post-accent);
  opacity: 0.85;
  margin-bottom: 28px;
}
.page-hero h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-bottom: 24px;
  text-align: left;
}
.page-hero .sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--post-text);
  max-width: 620px;
  margin: 0;
  text-align: left;
}
.page-hero { text-align: left; margin-left: auto; margin-right: auto; }

/* Meta row sits tight under the hero */
.post-meta {
  max-width: 760px;
  padding: 0 32px;
  margin: 0 auto 36px;
  font-size: 12px;
  color: var(--post-text-2);
  opacity: 0.9;
}

/* ── TL;DR callout ───────────────────────────── */
.tldr {
  max-width: 760px;
  margin: 8px auto 48px;
  padding: 22px 26px 22px 30px;
  border: none;
  border-left: 2px solid var(--post-accent);
  border-radius: 4px;
  background: rgba(201, 168, 255, 0.05);
}
.tldr-label {
  color: var(--post-accent);
  margin-bottom: 8px;
}
.tldr p {
  color: var(--post-text);
  font-size: 17px;
  line-height: 1.65;
}

/* ── Prose (the body of the article) ─────────── */
.prose {
  max-width: 680px;
  padding: 24px 32px 96px;
  color: var(--post-text);
  font-size: 18px;
  line-height: 1.78;
  font-weight: 300;
  letter-spacing: 0.005em;
}
.prose p { margin-bottom: 22px; }
.prose p:first-of-type { font-size: 19px; }   /* lede a touch larger */
.prose h2 {
  font-size: clamp(26px, 2.8vw, 34px);
  color: #fbf5ff;
  margin-top: 56px;
  margin-bottom: 16px;
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.prose h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--post-accent);
  opacity: 0.55;
  margin-bottom: 18px;
}
.prose h3 {
  font-size: 21px;
  color: #fbf5ff;
  margin-top: 36px;
  margin-bottom: 10px;
}
.prose ul { margin-bottom: 22px; padding-left: 4px; }
.prose ul li {
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.65;
}
.prose ul li::before {
  content: "◉";
  left: 0;
  top: 10px;
  font-size: 9px;
  color: var(--post-accent);
  opacity: 0.7;
}
.prose strong { color: #fbf5ff; font-weight: 500; }
.prose em { color: var(--post-accent); font-style: italic; }
.prose a {
  color: var(--post-accent);
  border-bottom: 1px solid rgba(201, 168, 255, 0.35);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  padding: 0 2px;
}
.prose a:hover {
  color: #fbf5ff;
  border-bottom-color: #fbf5ff;
  background: rgba(201, 168, 255, 0.08);
}

/* Optional pull-quote */
.prose blockquote {
  margin: 34px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--post-accent);
  color: #fbf5ff;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* Inline code, just in case */
.prose code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background: rgba(201, 168, 255, 0.08);
  border: 1px solid var(--post-rule);
  border-radius: 4px;
  color: #fbf5ff;
}

/* ── Key takeaways ───────────────────────────── */
.takeaways {
  max-width: 760px;
  padding: 28px 32px;
  background: rgba(201, 168, 255, 0.035);
  border: 1px solid var(--post-rule);
  border-radius: 14px;
  margin: 48px auto;
}
.takeaways h3 { color: var(--post-accent); margin-bottom: 18px; }
.takeaways ol li {
  color: var(--post-text);
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px solid var(--post-rule);
}

/* ── FAQ ─────────────────────────────────────── */
.faq { max-width: 760px; padding: 0 32px; margin: 48px auto 24px; }
.faq h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  color: #fbf5ff;
  margin-bottom: 20px;
}
.faq h2::before { display: none; }
.faq-item { padding: 20px 0; border-top: 1px solid var(--post-rule); }
.faq-item:last-child { border-bottom: 1px solid var(--post-rule); }
.faq-item h3 { color: #fbf5ff; font-size: 18px; margin-bottom: 8px; }
.faq-item p { color: var(--post-text); font-size: 15.5px; line-height: 1.65; }

/* ── Back link (top of page) ─────────────────── */
.back-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--post-text-2);
  text-decoration: none;
  padding: 8px 14px;
  margin: 120px 0 0 32px;
  border: 1px solid var(--post-rule);
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.back-link:hover {
  color: var(--post-accent);
  border-color: rgba(201, 168, 255, 0.35);
  background: rgba(201, 168, 255, 0.06);
}

/* ── CTA & related posts: keep base styles, small tweaks ── */
.page-cta { padding: 60px 32px 90px; }
.related-posts { padding: 40px 32px 80px; }
.related-card h4 { font-size: 19px; }
.related-card p { color: var(--post-text-2); }

/* ── Mobile ──────────────────────────────────── */
@media (max-width: 760px) {
  .page-hero { padding: 120px 22px 32px; }
  .page-hero h1 { font-size: clamp(34px, 8vw, 44px); }
  .page-hero .sub { font-size: 17px; }
  .post-meta { padding: 0 22px; font-size: 11px; gap: 10px; }
  .tldr { margin: 8px 22px 40px; padding: 20px 22px; border-radius: 3px; }
  .prose { padding: 16px 22px 72px; font-size: 17px; line-height: 1.72; }
  .prose p:first-of-type { font-size: 18px; }
  .prose h2 { font-size: 24px; margin-top: 44px; }
  .prose blockquote { font-size: 19px; padding-left: 18px; }
  .takeaways, .faq { padding-left: 22px; padding-right: 22px; }
  .takeaways { margin: 36px 22px; }
  .back-link { margin: 100px 0 0 22px; }
}

/* ── Reduced motion respects users ───────────── */
@media (prefers-reduced-motion: reduce) {
  .read-progress { transition: none; }
}