/* ==========================================================
   BLOG POST  (blog/*.html)
   Same system as the rest of the site:
   cream #f0ece2 · signal red #ff3b1f · Cy Grotesk + Poppins.
   Nav, footer and grain come from base.css / nav.css / footer.css.
   ========================================================== */

:root {
  --bp-cream: #f0ece2;
  --bp-red: #ff3b1f;
  --bp-ink: #0d0d0d;
  --bp-sand: #e2ddcf;
  --bp-mute: #6f6c64;
  --bp-pad: clamp(24px, 5vh, 64px);
}
@media (max-width: 1024px) { :root { --bp-pad: max(5vw, 32px); } }
@media (max-width: 700px)  { :root { --bp-pad: max(6.4vw, 22px); } }

/* `clip` instead of `hidden` so sticky/fixed things keep working */
body { overflow-x: clip; background: var(--bp-cream); color: var(--bp-ink); }

a:focus-visible, button:focus-visible, .navBtn:focus-visible {
  outline: 2px solid var(--bp-ink);
  outline-offset: 4px;
}

@media (max-width: 1024px) { .bpTop .navBar { position: fixed; } }

/* reading progress */
.bpProgress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  height: 3px; background: var(--bp-red);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- HEADER ---------- */
.bpHead {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(5.5rem, 14vh, 9rem) var(--bp-pad) clamp(2.5rem, 7vh, 4.5rem);
}
.bpMeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: var(--bp-mute);
}
.bpMeta i { width: 7px; height: 7px; border-radius: 50%; background: var(--bp-red); }
.bpTitle {
  margin-top: 1.6rem;
  font-family: 'font1medium'; font-weight: normal;
  font-size: clamp(2.5rem, 7.2vw, 6.2rem);
  line-height: 0.98; letter-spacing: -0.04em;
  text-wrap: balance;
}
.bpLead {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 38rem;
  font-family: 'Poppins', sans-serif; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6; color: var(--bp-ink);
  text-wrap: pretty;
}

/* ---------- ARTICLE ---------- */
.bpBody {
  max-width: calc(42rem + 2 * var(--bp-pad));
  margin: 0 auto;
  padding: 0 var(--bp-pad);
  border-top: 1px solid rgba(13, 13, 13, 0.14);
  font-family: 'Poppins', sans-serif; font-size: 1.0625rem; line-height: 1.8;
  overflow-wrap: break-word;
}
.bpBody > * + * { margin-top: 1.25rem; }
.bpBody > :first-child { margin-top: clamp(2.5rem, 7vh, 4rem); }

.bpBody h2 {
  margin-top: clamp(3.5rem, 9vh, 5.5rem);
  font-family: 'font1medium'; font-weight: normal;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.bpBody h2 span { color: var(--bp-red); margin-right: 0.35em; }
.bpBody h3 {
  margin-top: 2.2rem;
  font-family: 'font1medium'; font-weight: normal;
  font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.02em;
}
.bpBody h2 + *, .bpBody h3 + * { margin-top: 1rem; }

.bpBody strong { font-weight: 600; }
.bpBody .q {
  font-family: 'font1medium'; font-size: 1.35rem; line-height: 1.35;
  letter-spacing: -0.015em; text-wrap: balance;
}
.bpBody blockquote {
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--bp-red);
  font-family: 'font1medium'; font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.35; letter-spacing: -0.015em;
}
.bpBody ul, .bpBody ol { padding-left: 1.3rem; }
.bpBody li { padding-left: 0.3rem; }
.bpBody li + li { margin-top: 0.35rem; }
.bpBody li::marker { color: var(--bp-red); }
.bpBody a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--bp-red); text-underline-offset: 4px;
}

.bpBody .short { line-height: 1.5; }   /* one-line beats, tighter rhythm */
.bpBody .short + .short { margin-top: 0.6rem; }

.bpBody .closing {
  margin-top: clamp(3rem, 8vh, 4.5rem);
  font-family: 'font1medium'; font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}

/* ---------- CTA ---------- */
.bpCta {
  max-width: 62rem;
  margin: clamp(4rem, 10vh, 7rem) auto clamp(4rem, 10vh, 7rem);
  padding: 0 var(--bp-pad);
}
.bpCtaBox {
  padding: clamp(2rem, 6vw, 4.5rem);
  border-radius: 20px; background: var(--bp-red); color: var(--bp-cream);
}
.bpCtaBox h2 {
  max-width: 14em;
  font-family: 'font1medium'; font-weight: normal;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance;
}
.bpCtaBox p {
  margin-top: 1.25rem; max-width: 30rem;
  font-family: 'Poppins', sans-serif; line-height: 1.55;
}
.bpBtn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-top: 2rem; padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  border-radius: 999px; background: var(--bp-ink); color: #fff; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-size: 0.95rem;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, background-color 0.4s ease;
}
.bpBtn svg { display: block; color: var(--bp-ink); transition: transform 0.4s cubic-bezier(.77, 0, .18, 1); }
.bpBtn svg circle { fill: var(--bp-cream); }
.bpBtn:active { transform: scale(0.97); }
.bpBtn:focus-visible { outline-color: var(--bp-cream); }

@media (hover: hover) and (pointer: fine) {
  .bpBtn:hover svg { transform: translateX(3px); }
  .bpBody a:hover { text-decoration-color: currentColor; }
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 700px) {
  .bpBody { font-size: 1rem; line-height: 1.75; }
  .bpBody .q { font-size: 1.2rem; }
  .bpCtaBox { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bpBtn, .bpBtn svg { transition: none; } }