/* ========================================================================
   BLOG — visual language mirrors newsletter.html: same nav, same purple
   3D CTA, same cream-paper feel, same footer.

   Design tokens are inlined here (copied from tokens.css) so this file
   is the only stylesheet the blog needs. tokens.css is not loaded on
   blog pages, which avoids its @import of Crimson Text + Permanent Marker
   (unused on the blog) and saves one network round-trip.
   ===================================================================== */

:root {
  --fg: #1e1b4b;
  --fg-muted: #475569;
  --p0-purple: #6d28d9;
  --p0-purple-soft: #a78bfa;
  --p0-purple-tint-50: #faf5ff;
  --p0-purple-tint-100: #f3e8ff;
  --p0-purple-tint-border: #e6dcff;
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", cursive;
  --t-body: 400 1rem/1.55 var(--font-sans);
  --t-eyebrow: 700 10.5px/1.3 var(--font-sans);
  --track-eyebrow: 0.25em;
  --r-pill: 9999px;
  --r-xl: 24px;
  --r-lg: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--fg);
  font: var(--t-body);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > footer { margin-top: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--p0-purple); }

.container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 28px; }

/* ---------- Top nav (matches newsletter.html) ---------- */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--p0-purple-tint-100);
}
.top-nav .container {
  max-width: 1080px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.nav-logo { height: 40px !important; width: auto !important; display: inline-block !important; }
.nav-right { display: flex; align-items: center; gap: 14px; }

.hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  font: 600 0.82rem/1 var(--font-sans);
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  transition: color .15s;
}
.hero-back:hover { color: var(--p0-purple); }

.lang-select {
  appearance: none; -webkit-appearance: none;
  background: #ffffff;
  color: var(--fg);
  border: 1.5px solid var(--p0-purple-tint-border);
  border-radius: 999px;
  padding: 6px 26px 6px 12px;
  font: 600 0.85rem/1 var(--font-sans);
  letter-spacing: 0.05em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236d28d9' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s;
}
.lang-select:hover { border-color: var(--p0-purple); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #7c3aed;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid var(--fg);
  padding: 10px 20px; font-size: 0.8rem;
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 var(--fg);
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s;
  cursor: pointer;
}
.nav-cta:hover { box-shadow: 6px 6px 0 var(--fg); transform: rotate(0) translateY(-3px) scale(1.03); color: #fff; }
.nav-cta:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--fg); }

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 56px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
}
.hero .eyebrow {
  font: var(--t-eyebrow);
  color: var(--p0-purple);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  display: inline-block;
  margin-bottom: 20px;
}
.hero h1 {
  font: 800 clamp(2.25rem, 5vw, 3.25rem)/1.05 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 18px;
}
.hero h1 .accent {
  color: var(--p0-purple);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: -0.02em;
  display: inline-block;
  transform: rotate(-2deg);
}
.hero .tagline {
  font: 400 clamp(1.05rem, 1.8vw, 1.2rem)/1.55 var(--font-sans);
  color: var(--fg-muted);
  max-width: 540px;
  margin: 0 auto;
}

/* ---------- Post list ---------- */
.posts-section {
  padding: 72px 0;
  background: #faf7ff;
  border-top: 1px solid var(--p0-purple-tint-100);
}
.posts-grid {
  display: flex; flex-direction: column; gap: 24px;
  max-width: 680px; margin: 0 auto;
}
.post-card {
  background: #ffffff;
  border: 2px solid var(--fg);
  border-radius: var(--r-lg);
  box-shadow: 4px 4px 0 var(--p0-purple-soft);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.post-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--p0-purple-soft);
  color: inherit;
}
.post-card-image { height: 220px; overflow: hidden; }
.post-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  border-bottom: 2px solid var(--fg);
}
.post-card-image-fallback {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 60%, #a78bfa 100%);
  display: flex; align-items: center; justify-content: center;
}
.post-card-image-fallback img {
  width: 80px; height: 80px; object-fit: contain;
  border-bottom: none; opacity: 0.92;
}
.post-card-body { padding: 24px 28px; }
.post-card-date {
  font: 600 0.8rem/1 var(--font-sans);
  color: var(--p0-purple);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.post-card-title {
  font: 800 1.3rem/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 12px;
}
.post-card-excerpt {
  font: 400 0.95rem/1.6 var(--font-sans);
  color: var(--fg-muted);
  margin: 0;
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 24px;
  border-top: 1.5px solid var(--p0-purple-tint-100);
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.page-link {
  font: 700 0.9rem/1 var(--font-sans);
  color: var(--p0-purple);
  text-decoration: none;
  padding: 10px 18px;
  border: 2px solid var(--p0-purple-tint-border);
  border-radius: var(--r-pill);
  transition: border-color .15s, background .15s;
}
.page-link:hover {
  border-color: var(--p0-purple);
  background: var(--p0-purple-tint-50);
}

/* ---------- Coming soon ---------- */
.coming-soon {
  padding: 80px 0;
  background: #faf7ff;
  border-top: 1px solid var(--p0-purple-tint-100);
  text-align: center;
}
.coming-soon-card {
  display: inline-block;
  background: #ffffff;
  border: 2px solid var(--fg);
  border-radius: var(--r-xl);
  padding: 48px 56px;
  box-shadow: 6px 6px 0 #fde047;
  max-width: 520px;
}
.coming-soon-card .icon { font-size: 2.5rem; margin-bottom: 16px; }
.coming-soon-card h2 {
  font: 800 1.6rem/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 12px;
}
.coming-soon-card p {
  font: 400 1rem/1.6 var(--font-sans);
  color: var(--fg-muted);
  margin: 0;
}

/* ---------- Single post ---------- */
.post-hero {
  padding: 72px 0 48px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  text-align: center;
}
.post-hero .eyebrow {
  font: var(--t-eyebrow);
  color: var(--p0-purple);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  display: inline-block;
  margin-bottom: 16px;
}
.post-hero h1 {
  font: 800 clamp(1.8rem, 4vw, 2.8rem)/1.1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 16px;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.post-hero .post-date {
  font: 600 0.85rem/1 var(--font-sans);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.post-featured-image {
  width: 100%; max-width: 760px;
  margin: 0 auto;
  border-top: 2px solid var(--p0-purple-tint-100);
  aspect-ratio: 16/9;
  overflow: hidden;
}
.post-featured-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.post-body-section {
  padding: 56px 0 80px;
}
.post-content {
  max-width: 680px; margin: 0 auto;
  font: 400 1.05rem/1.75 var(--font-sans);
  color: var(--fg);
}
.post-content h2, .post-content h3, .post-content h4 {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-top: 2em;
}
.post-content p { margin: 0 0 1.4em; }
.post-content a { color: var(--p0-purple); }
.post-content img { border-radius: var(--r-lg); border: 2px solid var(--p0-purple-tint-100); margin: 1.5em 0; }
.post-content blockquote {
  border-left: 4px solid var(--p0-purple);
  margin: 1.5em 0; padding: 0 0 0 20px;
  color: var(--fg-muted);
  font-style: italic;
}
.post-content pre {
  background: #faf7ff; border: 1.5px solid var(--p0-purple-tint-100);
  border-radius: var(--r-lg); padding: 20px; overflow-x: auto;
}
.post-content code { font-size: 0.9em; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.9rem/1 var(--font-sans);
  color: var(--p0-purple);
  text-decoration: none;
  margin-bottom: 40px;
}
.back-link:hover { text-decoration: underline; }

/* ---------- Breadcrumb ---------- */
.post-breadcrumb { padding: 20px 0 20px; }
.post-breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 8px;
  font: 600 0.8rem/1 var(--font-sans);
  color: var(--fg-muted);
}
.post-breadcrumb li + li::before { content: "›"; color: var(--p0-purple-soft); margin-right: 8px; }
.post-breadcrumb a { color: var(--p0-purple); text-decoration: none; }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-breadcrumb [aria-current="page"] {
  color: var(--fg-muted);
}

/* ---------- Post meta (author · reading time) ---------- */
.post-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 0.82rem/1 var(--font-sans); color: var(--fg-muted);
  margin-top: 8px;
}
.post-meta-sep { color: var(--p0-purple-soft); }

/* ---------- Category pills ---------- */
.post-categories {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 16px;
}
.post-category {
  font: 700 0.72rem/1 var(--font-sans);
  color: var(--p0-purple); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--p0-purple-tint-50);
  border: 1.5px solid var(--p0-purple-tint-border);
  border-radius: var(--r-pill); padding: 4px 12px;
}

/* ---------- Related posts ---------- */
.related-posts { margin-top: 56px; padding-top: 40px; border-top: 1.5px solid var(--p0-purple-tint-100); }
.related-posts h3 {
  font: 800 1.1rem/1.2 var(--font-sans);
  letter-spacing: -0.02em; color: var(--fg); margin: 0 0 20px;
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.related-card {
  background: #ffffff;
  border: 2px solid var(--fg);
  border-radius: var(--r-lg);
  box-shadow: 3px 3px 0 var(--p0-purple-soft);
  padding: 16px 18px; text-decoration: none; color: inherit; display: block;
  transition: transform .15s, box-shadow .15s;
}
.related-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--p0-purple-soft); }
.related-card-date {
  font: 600 0.72rem/1 var(--font-sans);
  color: var(--p0-purple); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px;
}
.related-card-title { font: 700 0.9rem/1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--fg); margin: 0; }

/* ---------- Newsletter CTA ---------- */
.newsletter-cta {
  margin: 48px 0 0;
  padding: 32px 36px;
  background: #faf7ff;
  border: 2px solid var(--fg);
  border-radius: var(--r-lg);
  box-shadow: 4px 4px 0 #fde047;
  text-align: center;
}
.newsletter-cta h3 {
  font: 800 1.3rem/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 10px;
}
.newsletter-cta p {
  font: 400 0.95rem/1.55 var(--font-sans);
  color: var(--fg-muted);
  margin: 0 0 20px;
}

/* ---------- 404 ---------- */
.not-found {
  padding: 96px 0;
  text-align: center;
}
.not-found h1 {
  font: 800 2rem/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 12px;
}
.not-found p { color: var(--fg-muted); margin: 0 0 28px; }

/* ---------- Footer (matches newsletter.html) ---------- */
footer {
  background: #1e1b4b;
  color: rgba(255, 255, 255, 0.7);
  padding: 40px 20px;
  text-align: center;
  font: 400 0.9rem/1.55 var(--font-sans);
}
footer a { color: #c4b5fd; text-decoration: none; }
footer a:hover { color: #ffffff; }
footer > div + div { margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero { padding: 56px 0 44px; }
  .coming-soon-card { padding: 36px 24px; }
  .post-card-body { padding: 20px; }

  /* Nav: tighten right-side items so logo stays visible on narrow phones */
  .nav-right { gap: 8px; }
  .nav-cta { padding: 8px 14px; font-size: 0.75rem; }

  /* Breadcrumb: let long post titles wrap rather than overflow */
  .post-breadcrumb ol { flex-wrap: wrap; }

  /* Section vertical padding: less dead air on phones */
  .posts-section { padding: 48px 0; }
  .post-hero { padding: 48px 0 32px; }
  .post-body-section { padding: 40px 0 56px; }

  /* Newsletter CTA: tighter horizontal padding on narrow screens */
  .newsletter-cta { padding: 24px 20px; }
}