/* ============================================================
   ZC BLOG — blog.css
   Loaded alongside Webflow CSS on blog.html and blog-post.html.
   All rules scoped under body.blog-page or body.blog-post-page
   to avoid colliding with the existing site's .blog / .post styles.
   ============================================================ */

/* ----- Tokens ----- */
body.blog-page,
body.blog-post-page {
  --bg:           #080808;
  --bg-card:      #0d0d0d;
  --bg-card-soft: rgba(17, 17, 17, 0.77);
  --border:       #464646;
  --border-soft:  #2a2a2a;
  --text:         #ffffff;
  --text-soft:    #bebebe;
  --text-mute:    #7c7c7c;
  --text-faint:   #464646;
  --accent:       #71aaff;
  --radius:       16px;
  --radius-sm:    4px;
  --canvas:       1200px;
  --gutter:       80px;
  --font-display: 'Archivo Black', 'Montserrat', 'Sora', system-ui, sans-serif;
  --font-ui:      'Sora', system-ui, -apple-system, sans-serif;

  /* No background override — inherit from Webflow's .body class so the hero,
     sections, and footer all sit on the same colour as landing.html. */
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The existing landing.html sets body.no-scroll; we don't gate the blog */
body.blog-page.no-scroll,
body.blog-post-page.no-scroll {
  overflow: visible;
}

/* ----- Shared utilities ----- */
body.blog-page *,
body.blog-post-page * {
  box-sizing: border-box;
}

/* Defensive: Webflow base CSS sometimes ignores the [hidden] attribute. */
body.blog-page [hidden],
body.blog-post-page [hidden] { display: none !important; }

.bp-canvas {
  max-width: var(--canvas);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 991px) {
  .bp-canvas { padding: 0 48px; }
}
@media (max-width: 767px) {
  .bp-canvas { padding: 0 24px; }
}

/* NB: .navbar, .nav-menu, .nav_link_* — all styled by existing Webflow CSS
   (portfolio-8e08bb.webflow.css). Do NOT override here. The footer (.footer,
   .container-3, .div-block-7/8, .heading-6/7, .medium-link, .linkedin-link)
   is also styled by existing CSS — left alone deliberately. */

/* ----- Hero (index) -----
   Sized to read like landing.html's "ZACHARIA C." hero — display takes the
   page, content vertically composed inside a tall section, ink video behind. */
body.blog-page .hero {
  position: relative;
  min-height: 100vh;
  padding: 220px 0 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* No bg — body's Webflow colour cascades through. */
}
/* Background ink video — Webflow's .bgvideo_landing already absolute-fills.
   No tint overlay; matches landing.html exactly. */
body.blog-page .hero .bgvideo_landing { z-index: 1; }
body.blog-page .hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}
body.blog-page .hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 10vw, 132px);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.025em;
  color: var(--text);
}
body.blog-page .hero__subtitle {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
  margin: 0;
  color: var(--text-mute);
  text-transform: uppercase;
  max-width: 640px;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  body.blog-page .hero { min-height: 90vh; padding: 140px 0 64px; }
}
/* hero__atmosphere removed — was creating an unwanted purple tint over the video. */

/* ----- Filters (sit between FEATURED and ALL WRITINGS) -----
   IMPORTANT: only set vertical padding so .bp-canvas's horizontal padding
   (80px / 48px / 24px responsive) stays in effect — keeps the left edge
   aligned with FEATURED above and ALL WRITINGS below. */
body.blog-page .filters-section {
  padding-top: 24px;
  padding-bottom: 48px;
}
body.blog-page .filters {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}
body.blog-page .filters__count {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  padding-top: 12px;
  letter-spacing: 0.05em;
  /* Fixed width so the pills don't shift left/right when the count changes from
     "77 ARTICLES" to "9 ARTICLES" etc. */
  min-width: 120px;
  display: inline-block;
}
body.blog-page .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
}

/* On mobile, stack the count ABOVE the pills (instead of side-by-side). */
@media (max-width: 700px) {
  body.blog-page .filters {
    flex-direction: column;
    gap: 16px;
  }
  body.blog-page .filters__count {
    padding-top: 0;
    min-width: 0;
  }
}
body.blog-page .pill {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 220ms ease, border-color 220ms ease;
}
/* Hover: text + border turn accent-blue, no background change. Active pills
   stay white-on-black and don't pick up the hover colour. */
body.blog-page .pill:not(.is-active):hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}
body.blog-page .pill.is-active {
  background: var(--text);
  color: #000;
}

/* ----- Sections -----
   NOTE: only set vertical padding here. Horizontal padding must come from
   .bp-canvas so .section.bp-canvas keeps the same left edge as the hero. */
body.blog-page .section {
  padding-top: 64px;
  padding-bottom: 64px;
}
body.blog-page .section__heading {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 38.83px);
  color: var(--text);
  margin: 0 0 32px;
  letter-spacing: 0.02em;
}
body.blog-page .section__heading--centered {
  text-align: center;
  margin-bottom: 33px;
}

/* ----- Featured card ----- */
body.blog-page .featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 464px;
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 220ms ease, transform 220ms ease;
}
body.blog-page .featured:hover {
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-2px);
}
body.blog-page .featured__media {
  position: relative;
  background: linear-gradient(-37deg, #1B1A30 0%, #2D1B4D 33%, #372858 68%, #1E1D2F 100%);
  overflow: hidden;
}
body.blog-page .featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.blog-page .featured__tag {
  position: absolute;
  top: 16px; left: 16px;
  border: 1px solid #1f1f1f;
  background: linear-gradient(150deg, rgba(43,43,43,0.65) 23%, rgba(0,0,0,0.65) 64%);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 11px;
  letter-spacing: 0.1em;
}
body.blog-page .featured__body {
  padding: 23px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
body.blog-page .featured__category {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}
body.blog-page .featured__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1.05;
  color: var(--text);
  margin: 24px 0 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  transition: color 220ms ease;
}
body.blog-page .featured:hover .featured__title { color: var(--accent); }
body.blog-page .featured__excerpt {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 16px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
body.blog-page .featured__cta {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.blog-page .featured:hover .featured__cta { color: var(--text); }

@media (max-width: 767px) {
  body.blog-page .featured { grid-template-columns: 1fr; min-height: auto; }
  body.blog-page .featured__media { aspect-ratio: 16/10; }
}

/* ----- All Writings grid ----- */
body.blog-page .all-writings {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* No bg — inherit from body so the card colour matches the page. */
}
body.blog-page .card {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
  height: 289px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 220ms ease;
}
body.blog-page .card:hover {
  background: rgba(255,255,255,0.025);
}
body.blog-page .card:nth-child(3n) { border-right: none; }
/* Cards in the actual visual last row get .is-last-row applied by JS so their
   bottom border is suppressed against the container border. The previous
   :nth-last-child(-n+3) rule was wrong for incomplete rows. */
body.blog-page .all-writings .card.is-last-row { border-bottom: none; }
body.blog-page .card__media {
  width: 100%;
  height: 100px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #2a2a3a, #1a1a2a);
  overflow: hidden;
  flex-shrink: 0;
}
body.blog-page .card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.blog-page .card__category {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.blog-page .card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  margin: 11px 0 0;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: color 220ms ease;
}
body.blog-page .card:hover .card__title { color: var(--accent); }
body.blog-page .card__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 991px) {
  body.blog-page .all-writings { grid-template-columns: repeat(2, 1fr); }
  body.blog-page .card:nth-child(3n) { border-right: 1px solid var(--border); }
  body.blog-page .card:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  body.blog-page .all-writings { grid-template-columns: 1fr; }
  body.blog-page .card { border-right: none; }
}

/* ----- Pagination ----- */
body.blog-page .pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 33px;
}
body.blog-page .pagination__arrow,
body.blog-page .pagination__num {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 24px;
  color: rgba(124,124,124,0.49);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  text-transform: uppercase;
  transition: color 180ms ease;
}
body.blog-page .pagination__arrow:disabled { cursor: not-allowed; opacity: 0.3; }
body.blog-page .pagination__arrow:not(:disabled):hover,
body.blog-page .pagination__num:hover { color: var(--text); }
body.blog-page .pagination__num.is-active { color: var(--text); }

/* ============================================================
   POST PAGE
   ============================================================ */

/* ----- Post hero ----- */
body.blog-post-page .post-hero {
  padding: 156px 0 0;
  position: relative;
  overflow: hidden;
  /* No bg — body's Webflow colour cascades through. */
}
/* post-hero__atmosphere removed for the same reason — clean black background. */
body.blog-post-page .post-hero__inner {
  position: relative;
  z-index: 2;
}
body.blog-post-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}
body.blog-post-page .breadcrumb a {
  color: var(--text-mute);
  text-decoration: none;
  border: none;
  transition: color 220ms ease;
}
body.blog-post-page .breadcrumb a:hover { color: var(--accent); }
body.blog-post-page .breadcrumb__rule {
  width: 32px; height: 1px; background: var(--text-mute);
}
body.blog-post-page .post-title-block {
  margin-top: 56px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--border);
}
body.blog-post-page .post-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 66px);
  line-height: 1.05;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
body.blog-post-page .post-subtitle {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  margin: 24px 0 0;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Meta row: avatar+name | reading time | date | source */
body.blog-post-page .post-meta {
  margin-top: 19px;
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) 1fr 1fr 1fr;
  align-items: center;
  gap: 0;
}
body.blog-post-page .post-meta__author {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-right: 24px;
  border-right: 1px solid var(--border);
  height: 64px;
}
body.blog-post-page .post-meta__avatar {
  width: 64px; height: 64px;
  border-radius: 100px;
  border: 1px solid #3f3f3f;
  overflow: hidden;
  flex-shrink: 0;
  background: #1a1a1a;
}
body.blog-post-page .post-meta__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
body.blog-post-page .post-meta__author-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.blog-post-page .post-meta__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: 0.02em;
}
body.blog-post-page .post-meta__role {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.blog-post-page .post-meta__cell {
  padding-left: 24px;
  border-right: 1px solid var(--border);
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
body.blog-post-page .post-meta__cell:last-child { border-right: none; }
body.blog-post-page .post-meta__cell-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: 0.02em;
}
body.blog-post-page .post-meta__cell-value a {
  color: inherit;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  transition: color 220ms ease;
}
body.blog-post-page .post-meta__cell-value a:hover { color: var(--accent); }
body.blog-post-page .post-meta__cell-arrow {
  font-size: 0.85em;
  display: inline-block;
  transform: translateY(-1px);
  transition: transform 220ms ease;
}
body.blog-post-page .post-meta__cell-value a:hover .post-meta__cell-arrow {
  transform: translate(2px, -3px);
}
body.blog-post-page .post-meta__cell-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  body.blog-post-page .post-meta {
    grid-template-columns: 1fr 1fr;
    gap: 24px 0;
  }
  body.blog-post-page .post-meta__author { grid-column: 1 / -1; border-right: none; padding-right: 0; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  body.blog-post-page .post-meta__cell:nth-child(2) { padding-left: 0; }
  body.blog-post-page .post-meta__cell:nth-child(3) { border-right: none; }
}

/* ----- Cover image -----
   Auto-height so the actual image dictates ratio (no cropping). Min-height
   provides a fallback gradient frame when no cover is set. Generous bottom
   margin separates the cover from the article body. */
body.blog-post-page .post-cover {
  width: 100%;
  margin: 48px 0 80px;
  min-height: 320px;
  background: #000;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.blog-post-page .post-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  body.blog-post-page .post-cover { min-height: 220px; margin: 32px 0 56px; }
  body.blog-post-page .post-cover img { max-height: 420px; }
}

/* ----- Body + Sidebar layout ----- */
body.blog-post-page .post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  max-width: var(--canvas);
  margin: 0 auto;
}
body.blog-post-page .post-body {
  padding: 64px 100px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
  /* The sidebar visually has a left border that runs the full layout height —
     achieved here by using post-body's right border instead of the sidebar's
     left border (sidebar is sticky/fit-content so its own border is partial). */
}
body.blog-post-page .post-sidebar {
  padding: 64px 31px;
  position: sticky;
  top: 89px;
  align-self: start;
  /* Sidebar can't grow taller than the viewport (minus nav). The TOC list
     scrolls internally so the PROGRESS block stays anchored at the bottom
     of the sidebar regardless of how long the article's heading list is. */
  max-height: calc(100vh - 89px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 992px) {
  body.blog-post-page .post-body {
    border-right: 1px solid var(--border);
  }
}

@media (max-width: 991px) {
  body.blog-post-page .post-layout { grid-template-columns: 1fr; }
  body.blog-post-page .post-body { padding: 48px 48px; }
  body.blog-post-page .post-sidebar { display: none; }
}
@media (max-width: 767px) {
  body.blog-post-page .post-body { padding: 32px 24px; }
}

/* ----- Sidebar (ToC + Progress) ----- */
body.blog-post-page .toc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;     /* required so .toc__list can shrink + scroll inside */
  overflow: hidden;  /* contain the mask */
}
body.blog-post-page .toc__label,
body.blog-post-page .progress__label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.05;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
body.blog-post-page .toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  /* Edge fade so the list visibly bleeds out at top + bottom — keeps the
     PROGRESS block beneath always feeling distinct from the scroll area. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
body.blog-post-page .toc__list::-webkit-scrollbar { width: 4px; }
body.blog-post-page .toc__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
body.blog-post-page .toc__list::-webkit-scrollbar-track { background: transparent; }
body.blog-post-page .toc__item a {
  display: block;
  padding: 16px 12px 16px 24px;
  border-left: 1px solid var(--border);
  border-bottom: none;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.05;
  color: var(--text-faint);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 180ms ease, border-color 180ms ease;
}
body.blog-post-page .toc__item a:hover { color: var(--accent); border-left-color: var(--accent); }
body.blog-post-page .toc__item.is-active a {
  border-left-color: var(--text);
  color: var(--text);
  font-weight: 500;
}
body.blog-post-page .toc__item.is-h3 a { padding-left: 36px; font-size: 13px; }

body.blog-post-page .progress {
  display: flex;
  flex-direction: column;
  gap: 17px;
  flex-shrink: 0;
}
body.blog-post-page .progress__bar {
  height: 2px;
  background: var(--border);
  position: relative;
}
body.blog-post-page .progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--text);
  transition: width 80ms linear;
}
body.blog-post-page .progress__pct {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

/* ----- Key takeaways ----- */
body.blog-post-page .takeaways {
  background: var(--bg-card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.blog-post-page .takeaways__label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.blog-post-page .takeaways__list {
  list-style: disc;
  margin: 0;
  padding-left: 24px;
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}
body.blog-post-page .takeaways__list li {
  padding: 8px 0;
}
body.blog-post-page .takeaways__list li:not(:last-child) {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
  margin-bottom: 16px;
}
body.blog-post-page .takeaways__list li::marker {
  color: var(--text-mute);
}

/* ----- Article body content ----- */
body.blog-post-page .article {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 700px;
}
body.blog-post-page .article h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  scroll-margin-top: 120px;
}
body.blog-post-page .article h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  scroll-margin-top: 120px;
}
body.blog-post-page .article p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
body.blog-post-page .article p + p { margin-top: 16px; }
body.blog-post-page .article strong { font-weight: 500; color: var(--text); }
body.blog-post-page .article em { font-style: italic; }
body.blog-post-page .article a {
  color: var(--accent);
  border-bottom: 1px solid rgba(113,170,255,0.4);
  transition: border-color 200ms ease;
}
body.blog-post-page .article a:hover { border-bottom-color: var(--accent); }

/* Article section (h2 + paragraphs grouped) */
body.blog-post-page .article__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pull quote */
body.blog-post-page .pullquote {
  border-left: 1px solid var(--border);
  padding: 32px 0 32px 24px;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--text);
  max-width: 700px;
}

/* Callout */
body.blog-post-page .callout {
  background: var(--bg-card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 700px;
}
body.blog-post-page .callout__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--text-mute);
}
body.blog-post-page .callout__text {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
}

/* Inline figure (image) */
body.blog-post-page .article__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 700px;
}
body.blog-post-page .article__figure img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  display: block;
  border: 1px solid var(--border);
  background: #000;
}
body.blog-post-page .article__figure figcaption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* ----- Share row ----- */
body.blog-post-page .share {
  padding: 39px 105px;
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 900px;
}
body.blog-post-page .share__label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.blog-post-page .share__buttons {
  display: flex;
  gap: 24px;
}
body.blog-post-page .share__btn {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
body.blog-post-page .share__btn:hover { background: var(--text); color: #000; }
body.blog-post-page .share__btn.is-copied { background: var(--text); color: #000; }

@media (max-width: 991px) {
  body.blog-post-page .share { padding: 39px 48px; }
}
@media (max-width: 767px) {
  body.blog-post-page .share { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  body.blog-post-page .share__buttons { flex-wrap: wrap; gap: 12px; }
}

/* ----- Related posts -----
   Wraps in .bp-canvas (max-width 1200, gutter 80) so the grid sits at the same
   width as the ALL WRITINGS grid on the index, and the label aligns to the
   same left edge as everything else on the page. */
body.blog-post-page .related {
  border-top: 1px solid var(--border);
  padding: 64px 0;
}
body.blog-post-page .related__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
body.blog-post-page .related__grid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* Replicate the index .all-writings card styling here so the related cards on
   the post page render exactly like the main blog grid (layout, padding,
   hover, etc.). Without these the markup falls back to default <a> styles —
   which is what was producing the blue/purple visited-link colours. */
body.blog-post-page .related__grid .card {
  border-right: 1px solid var(--border);
  border-bottom: none;
  padding: 16px 24px 24px;
  height: 289px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: background 220ms ease;
}
/* Override any :visited / :link browser-default colour leaking through. */
body.blog-post-page .related__grid .card,
body.blog-post-page .related__grid .card:link,
body.blog-post-page .related__grid .card:visited,
body.blog-post-page .related__grid .card:active {
  color: var(--text);
}
body.blog-post-page .related__grid .card:hover {
  background: rgba(255,255,255,0.025);
}
body.blog-post-page .related__grid .card:nth-child(3n) { border-right: none; }
body.blog-post-page .related__grid .card__media {
  width: 100%;
  height: 100px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #2a2a3a, #1a1a2a);
  overflow: hidden;
  flex-shrink: 0;
}
body.blog-post-page .related__grid .card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.blog-post-page .related__grid .card__category {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.blog-post-page .related__grid .card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  margin: 11px 0 0;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: color 220ms ease;
}
body.blog-post-page .related__grid .card:hover .card__title { color: var(--accent); }
body.blog-post-page .related__grid .card__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 991px) {
  body.blog-post-page .related__grid { grid-template-columns: repeat(2, 1fr); }
  body.blog-post-page .related__grid .card:nth-child(3n) { border-right: 1px solid var(--border); }
  body.blog-post-page .related__grid .card:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  body.blog-post-page .related__grid { grid-template-columns: 1fr; }
  body.blog-post-page .related__grid .card { border-right: none; border-bottom: 1px solid var(--border); }
  body.blog-post-page .related__grid .card:last-child { border-bottom: none; }
}

/* ============================================================
   SHARED — Email capture & Footer (both pages)
   ============================================================ */

.bp-email {
  margin: 64px 0;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.bp-email__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.98;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.bp-email__copy {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 16px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bp-email__form {
  display: flex;
  gap: 12px;
}
.bp-email__input {
  flex: 1;
  background: rgba(70,70,70,0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  color: var(--text);
  outline: none;
  transition: border-color 200ms ease;
  min-width: 0;
}
.bp-email__input::placeholder { color: #666; }
.bp-email__input:focus { border-color: var(--text); }
.bp-email__submit {
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  color: var(--text);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.bp-email__submit:hover { background: var(--text); color: #000; border-color: var(--text); }
.bp-email__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.bp-email__status {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mute);
  margin: 0;
  min-height: 18px;
  letter-spacing: 0.04em;
}
.bp-email__status.is-success { color: #6dd99a; }
.bp-email__status.is-error { color: #ff7a7a; }

@media (max-width: 600px) {
  .bp-email { padding: 24px; }
  .bp-email__form { flex-direction: column; }
  .bp-email__submit { width: 100%; }
}

/* Footer: fully styled by existing portfolio-8e08bb.webflow.css (.footer / .container-3 /
   .div-block-7/8 / .heading-6 / .heading-7 / .medium-link / .linkedin-link). No overrides here. */

/* ----- States: loading & empty ----- */
.bp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bp-empty {
  padding: 64px 32px;
  text-align: center;
  font-family: var(--font-ui);
  color: var(--text-mute);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}