/* ============================================================
   post-cozy.css — cozy handmade article pages
   Pairs with _includes/post.njk (rendered at /blog/<slug>/)
   Relies on manishelf-cozy.css for palette/topbar/footer
   ============================================================ */

/* ---------- Article shell ---------- */

body.blog-post .post-article {
  max-width: 960px !important;
  margin: clamp(24px, 4vh, 48px) auto clamp(40px, 6vh, 72px) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.blog-post .post-body,
body.blog-post .post-endorse,
body.blog-post .post-foot {
  max-width: none !important;
}

/* ---------- Header block ---------- */

body.blog-post .post-header {
  position: relative !important;
  padding: clamp(8px, 1.5vh, 16px) 0 clamp(20px, 3vh, 28px) !important;
  margin-bottom: clamp(28px, 4vh, 40px) !important;
  border-bottom: 1px dashed rgba(107, 74, 138, 0.22) !important;
  text-align: center !important;
}

body.blog-post .post-eyebrow {
  display: inline-block !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ember, #c9765a) !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

body.blog-post .post-title {
  color: var(--ink, #2a1f3d) !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  line-height: 1.08 !important;
  margin: 0 0 18px !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
body.blog-post .post-title em {
  font-style: normal !important;
  color: var(--ember, #c9765a) !important;
}

body.blog-post .post-meta {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--ink-soft, #4a3a62) !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}
body.blog-post .post-meta .post-dot {
  color: var(--ink-faint, #8a7a9e) !important;
}

body.blog-post .post-standfirst {
  font-family: 'Nunito', sans-serif !important;
  font-style: italic !important;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  line-height: 1.55 !important;
  color: var(--ink-soft, #4a3a62) !important;
  max-width: 60ch !important;
  margin: 18px auto 0 !important;
}

/* ---------- Body prose ---------- */

body.blog-post .post-body {
  font-family: 'Nunito', sans-serif !important;
  font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
  line-height: 1.75 !important;
  color: var(--ink, #2a1f3d) !important;
  max-width: none !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.blog-post .post-body p {
  margin: 0 0 1.2em !important;
  font-family: 'Nunito', sans-serif !important;
  color: var(--ink, #2a1f3d) !important;
}

body.blog-post .post-body p:first-of-type::first-letter {
  font-family: 'Nunito', sans-serif !important;
  font-size: 3.2em !important;
  line-height: 0.85 !important;
  float: left !important;
  margin: 0.08em 0.08em 0 0 !important;
  padding: 0 !important;
  color: var(--ember, #c9765a) !important;
  font-weight: 700 !important;
}

body.blog-post .post-body h2 {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
  color: var(--ink, #2a1f3d) !important;
  margin: 1em 0 0.3em !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

body.blog-post .post-body h3 {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.3rem, 2vw, 1.65rem) !important;
  color: var(--ink, #2a1f3d) !important;
  margin: 1.5em 0 0.4em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.blog-post .post-body em {
  color: var(--ember, #c9765a) !important;
  font-style: italic !important;
}

body.blog-post .post-body strong {
  color: var(--ink, #2a1f3d) !important;
  font-weight: 700 !important;
}

body.blog-post .post-body a {
  color: var(--ember, #c9765a) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(201, 118, 90, 0.4) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color 0.15s ease !important;
}
body.blog-post .post-body a:hover {
  text-decoration-color: var(--ember, #c9765a) !important;
}

body.blog-post .post-body blockquote {
  margin: 1.6em 0 !important;
  padding: 0.2em 0 0.2em 1.2em !important;
  border-left: 3px solid var(--ember, #c9765a) !important;
  color: var(--ink-soft, #4a3a62) !important;
  font-style: italic !important;
  background: transparent !important;
}
body.blog-post .post-body blockquote p {
  color: var(--ink-soft, #4a3a62) !important;
}

body.blog-post .post-body ul,
body.blog-post .post-body ol {
  margin: 0 0 1.2em !important;
  padding-left: 1.4em !important;
  color: var(--ink, #2a1f3d) !important;
}
body.blog-post .post-body li {
  margin: 0.35em 0 !important;
  line-height: 1.7 !important;
}
body.blog-post .post-body ul li::marker {
  color: var(--ember, #c9765a) !important;
}

body.blog-post .post-body code {
  background: rgba(107, 74, 138, 0.08) !important;
  color: var(--plum, #6b4a8a) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
  font-size: 0.92em !important;
}

body.blog-post .post-body hr {
  border: 0 !important;
  height: 1px !important;
  background-image: linear-gradient(to right,
    rgba(107, 74, 138, 0.28) 40%, transparent 40%) !important;
  background-size: 8px 1px !important;
  margin: 2em auto !important;
  max-width: 40% !important;
}

body.blog-post .post-body img,
body.blog-post .post-body figure.post-image img {
  border-radius: 4px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(42, 31, 61, 0.18) !important;
  border: 1px solid rgba(107, 74, 138, 0.12) !important;
}
body.blog-post .post-body figure.post-image figcaption {
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.85rem !important;
  color: var(--ink-soft, #4a3a62) !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-style: italic !important;
}

/* ---------- Endorse (like button) ---------- */

body.blog-post .post-endorse {
  max-width: 68ch !important;
  margin: clamp(40px, 6vh, 64px) auto clamp(24px, 4vh, 40px) !important;
  padding: clamp(22px, 3vh, 32px) !important;
  text-align: center !important;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px,
      rgba(107, 74, 138, 0.05) 31px, rgba(107, 74, 138, 0.05) 32px),
    radial-gradient(ellipse at 50% 30%, #fdf8e6 0%, #f8efd6 65%, #f2e6c7 100%) !important;
  border: 1px solid rgba(107, 74, 138, 0.10) !important;
  border-radius: 4px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 34px -12px rgba(42, 31, 61, 0.24) !important;
  position: relative !important;
  transform: rotate(-0.3deg) !important;
}
body.blog-post .post-endorse::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 88px;
  height: 22px;
  background: linear-gradient(180deg,
    rgba(232, 152, 120, 0.92),
    rgba(201, 118, 90, 0.78));
  box-shadow: 0 3px 7px rgba(42, 31, 61, 0.14);
}
body.blog-post .post-endorse::after {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: -22px !important;
  height: 30px !important;
  background: radial-gradient(ellipse at center top,
    rgba(42, 31, 61, 0.30) 0%,
    rgba(42, 31, 61, 0.16) 40%,
    transparent 75%) !important;
  filter: blur(6px) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: 50% !important;
}
body.blog-post .endorse-ask {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
  color: var(--ink, #2a1f3d) !important;
  margin: 0 0 14px !important;
  font-weight: 600 !important;
}
body.blog-post .like-btn {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: transform 0.15s ease !important;
}
body.blog-post .like-btn:hover {
  transform: scale(1.06) !important;
}
body.blog-post .like-heart {
  width: 28px !important;
  height: 28px !important;
  fill: rgba(107, 74, 138, 0.25) !important;
  stroke: var(--ember, #c9765a) !important;
  stroke-width: 1.4 !important;
  transition: fill 0.2s ease !important;
}
body.blog-post .like-btn.is-liked .like-heart {
  fill: var(--ember, #c9765a) !important;
}
body.blog-post .like-btn.is-pulsing .like-heart {
  animation: likePulse 0.6s ease !important;
}
@keyframes likePulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.95); }
}
body.blog-post .like-count {
  font-family: 'Nunito', sans-serif !important;
  color: var(--ink-soft, #4a3a62) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  min-width: 1ch !important;
}
body.blog-post .endorse-note {
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--ink-faint, #8a7a9e) !important;
  margin: 10px 0 0 !important;
}

/* ---------- Footer ---------- */

body.blog-post .post-foot {
  max-width: 68ch !important;
  margin: clamp(32px, 4vh, 48px) auto 0 !important;
  padding-top: clamp(20px, 3vh, 28px) !important;
  border-top: 1px dashed rgba(107, 74, 138, 0.22) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
body.blog-post .post-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body.blog-post .post-tags .entry-tag {
  display: inline-block !important;
  font-family: 'Caveat', cursive !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 2px 10px 3px !important;
  background: #fef3d9 !important;
  color: var(--plum, #6b4a8a) !important;
  border: 1.5px dashed rgba(107, 74, 138, 0.55) !important;
  border-radius: 3px !important;
  letter-spacing: 0.005em !important;
  position: static !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
body.blog-post .post-tags .entry-tag::before {
  content: "#" !important;
  position: static !important;
  left: auto !important;
  color: var(--plum, #6b4a8a) !important;
  margin-right: 3px !important;
  font-weight: 600 !important;
}
body.blog-post .post-back {
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.88rem !important;
  color: var(--ember, #c9765a) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.15s ease !important;
}
body.blog-post .post-back:hover {
  transform: translateX(-3px) !important;
}

/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {
  body.manishelf-page.blog-post {
    background:
      radial-gradient(ellipse 420px 280px at 78% 14%, rgba(169, 142, 201, 0.10), transparent 70%),
      radial-gradient(ellipse 360px 240px at 14% 30%, rgba(232, 152, 120, 0.06), transparent 70%),
      linear-gradient(to bottom,
        #0b0514 0%,
        #100a20 20%,
        #140d28 50%,
        #170f2d 80%,
        #181031 100%) !important;
  }

  body.blog-post .post-header {
    border-bottom-color: rgba(201, 184, 221, 0.20) !important;
  }
  body.blog-post .post-eyebrow { color: var(--ember, #e89878) !important; }
  body.blog-post .post-title { color: var(--ink, #fef3d9) !important; }
  body.blog-post .post-title em { color: var(--ember, #e89878) !important; }
  body.blog-post .post-meta { color: var(--ink-soft, #d8c9ec) !important; }
  body.blog-post .post-standfirst { color: var(--ink-soft, #d8c9ec) !important; }

  body.blog-post .post-body,
  body.blog-post .post-body p,
  body.blog-post .post-body li { color: var(--ink-soft, #d8c9ec) !important; }
  body.blog-post .post-body strong { color: #ede0ff !important; }
  body.blog-post .post-body h2,
  body.blog-post .post-body h3 { color: #fef3d9 !important; }
  body.blog-post .post-body em { color: var(--ember, #e89878) !important; }
  body.blog-post .post-body a {
    color: var(--ember, #e89878) !important;
    text-decoration-color: rgba(232, 152, 120, 0.4) !important;
  }
  body.blog-post .post-body a:hover { text-decoration-color: var(--ember, #e89878) !important; }
  body.blog-post .post-body blockquote {
    border-left-color: var(--ember, #e89878) !important;
    color: var(--ink-soft, #d8c9ec) !important;
  }
  body.blog-post .post-body blockquote p { color: var(--ink-soft, #d8c9ec) !important; }
  body.blog-post .post-body ul li::marker { color: var(--ember, #e89878) !important; }
  body.blog-post .post-body p:first-of-type::first-letter { color: var(--ember, #e89878) !important; }
  body.blog-post .post-body code {
    background: rgba(201, 184, 221, 0.10) !important;
    color: var(--plum-dusk, #a98ec9) !important;
  }
  body.blog-post .post-body hr {
    background-image: linear-gradient(to right, rgba(201, 184, 221, 0.30) 40%, transparent 40%) !important;
  }
  body.blog-post .post-body img,
  body.blog-post .post-body figure.post-image img {
    border-color: rgba(201, 184, 221, 0.14) !important;
    box-shadow:
      0 1px 0 rgba(201, 184, 221, 0.06) inset,
      0 10px 28px rgba(0, 0, 0, 0.55) !important;
  }
  body.blog-post .post-body figure.post-image figcaption { color: var(--ink-soft, #d8c9ec) !important; }

  body.blog-post .post-endorse {
    background:
      repeating-linear-gradient(to bottom, transparent 0, transparent 31px,
        rgba(201, 184, 221, 0.05) 31px, rgba(201, 184, 221, 0.05) 32px),
      radial-gradient(ellipse at 50% 30%, #2d2145 0%, #221838 65%, #1a1130 100%) !important;
    border-color: rgba(201, 184, 221, 0.14) !important;
    box-shadow:
      0 1px 0 rgba(201, 184, 221, 0.06) inset,
      0 14px 34px -12px rgba(0, 0, 0, 0.6) !important;
  }
  body.blog-post .endorse-ask { color: var(--ink, #fef3d9) !important; }
  body.blog-post .like-heart { fill: rgba(201, 184, 221, 0.18) !important; stroke: var(--ember, #e89878) !important; }
  body.blog-post .like-btn.is-liked .like-heart { fill: var(--ember, #e89878) !important; }
  body.blog-post .like-count { color: var(--ink-soft, #d8c9ec) !important; }
  body.blog-post .endorse-note { color: var(--ink-faint, #a98ec9) !important; }

  body.blog-post .post-foot {
    border-top-color: rgba(201, 184, 221, 0.20) !important;
  }
  body.blog-post .post-tags .entry-tag {
    background: rgba(201, 184, 221, 0.10) !important;
    color: var(--plum-dusk, #d8c9ec) !important;
  }
  body.blog-post .post-tags .entry-tag::before { color: var(--ember, #e89878) !important; }
  body.blog-post .post-back { color: var(--ember, #e89878) !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body.blog-post .post-body p:first-of-type::first-letter {
    font-size: 3.4em !important;
  }
}