/* ==========================================================================
   8X Gear — single post ("The Side Quest" article)
   Ported from blog-post.html, the `.bp-*` block. Markup is ours (single.php),
   class names kept from the prototype so the two diff line by line.
   ========================================================================== */

.bp-col{max-width:740px;margin:0 auto;padding:0 28px;}
.bp-wide{max-width:900px;margin:0 auto;padding:0 28px;}
.bp-kicker{
  margin:0 0 14px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}

/* ==================================================== 1. hero */
.bp-hero{background:var(--ct-deep);color:#fff;padding:34px 0 46px;}
.bp-crumb{margin:0 0 26px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.bp-crumb a{color:rgba(255,255,255,.64);text-decoration:none;}
.bp-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.bp-crumb i{font-style:normal;color:rgba(255,255,255,.36);padding:0 9px;}
.bp-crumb span{color:var(--ct-red);}
.bp-hero .bp-kicker{color:var(--ct-red);}
.bp-title{
  margin:0;color:var(--ct-cream);font-size:clamp(32px,4.6vw,62px);line-height:.96;
  font-weight:900;letter-spacing:-.045em;text-transform:uppercase;
}
.bp-lead{
  margin:28px 0 0;padding-left:20px;border-left:3px solid var(--ct-red);
  font-size:16px;line-height:1.72;color:rgba(255,255,255,.80);
}
.bp-byline{
  margin:26px 0 0;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ==================================================== 2. body */
.bp-body{padding:46px 0 64px;}
.bp-figure{margin:0 auto 42px;}
.bp-figure img{
  width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center 45%;
  border:1px solid var(--ct-line);display:block;
}
.bp-figure figcaption{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--ct-quiet);}

/* contents + key takeaways */
.bp-guide{border:1px solid var(--ct-ink);margin:0 auto 44px;}
.bp-toc{background:var(--ct-deep);color:#fff;padding:22px 24px 24px;}
.bp-toc-h{
  display:flex;align-items:center;gap:11px;margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
}
.bp-toc-h svg{width:18px;height:18px;color:var(--ct-red);flex:none;}
/* The list counts from 00 when Key takeaways leads it. Without that entry it
   starts at 01, so the numbers agree with the SECTION eyebrows below. */
.bp-toc ol{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;
  margin:0;padding:0;list-style:none;counter-reset:toc -1;
}
.bp-toc--nokey ol{counter-reset:toc 0;}
.bp-toc li{counter-increment:toc;margin:0;}
.bp-toc a{
  display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;
  color:#fff;text-decoration:none;
  font-size:13px;font-weight:900;line-height:1.35;text-transform:uppercase;letter-spacing:.01em;
}
.bp-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--ct-red);font-variant-numeric:tabular-nums;}
.bp-toc a:hover{text-decoration:underline;text-underline-offset:4px;}

.bp-key{background:#fff;padding:24px;}
.bp-key ul{margin:0;padding:0;list-style:none;display:grid;gap:14px;}
.bp-key li{
  display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;margin:0;
  color:#0E1013;font-size:14px;font-weight:800;line-height:1.5;
}
.bp-key svg{width:18px;height:18px;margin-top:1px;color:var(--ct-red-ink);}

/* sections */
.bp-sec{padding:0 0 34px;margin-bottom:34px;border-bottom:1px solid var(--ct-ink);}
.bp-sec:last-of-type{border-bottom:0;}
.bp-sec-no{
  margin:0 0 12px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
}
.bp-sec h2{
  margin:0 0 20px;color:#0E1013;font-size:clamp(26px,3.2vw,38px);line-height:1.04;
  font-weight:900;letter-spacing:-.04em;text-transform:uppercase;
}
.bp-sec p{margin:0 0 18px;font-size:16px;line-height:1.78;color:var(--ct-quiet);}
.bp-sec p:last-child{margin-bottom:0;}
.bp-sec ul,.bp-sec ol{margin:0 0 18px 1.1em;padding:0;}
.bp-sec li{margin:0 0 8px;font-size:16px;line-height:1.78;color:var(--ct-quiet);}
.bp-sec img{max-width:100%;height:auto;}
.bp-sec a{color:#0E1013;text-decoration:underline;text-underline-offset:3px;}
.bp-sec a:hover{color:var(--ct-red-ink);}

/* faq */
.bp-faq{padding-top:6px;}
.bp-qa{padding:22px 0;border-bottom:1px solid var(--ct-line);}
.bp-qa:first-of-type{border-top:1px solid var(--ct-line);}
.bp-qa h3{margin:0 0 10px;color:#0E1013;font-size:16px;font-weight:900;line-height:1.35;}
.bp-qa p{margin:0;font-size:15px;line-height:1.75;color:var(--ct-quiet);}

/* author */
.bp-author{margin:44px 0 0;border:1px solid var(--ct-ink);background:#fff;padding:26px 26px 24px;}
.bp-author-top{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;}
/* The byline is an editorial team, not a named individual, so the brand
   monogram stands in rather than a stock face. */
.bp-avatar{
  width:96px;height:96px;flex:none;background:#0E1013;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;letter-spacing:-.02em;
}
.bp-author-name{margin:0 0 6px;color:#0E1013;font-size:20px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;}
.bp-author-role{margin:0 0 14px;color:var(--ct-red-ink);font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;}
.bp-author-bio{margin:0 0 16px;font-size:15px;line-height:1.7;color:var(--ct-quiet);}
.bp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.bp-tag{
  padding:7px 11px;border:1px solid var(--ct-ink);color:#0E1013;text-decoration:none;
  font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.bp-tag:hover{background:var(--ct-ink);color:#fff;}

/* ==================================================== 3. next reads */
.bp-next{background:#fff;border-top:1px solid var(--ct-line);padding:52px 0 64px;}
.bp-next h2{
  margin:0 0 6px;color:#0E1013;font-size:clamp(26px,3.2vw,40px);
  font-weight:900;letter-spacing:-.045em;text-transform:uppercase;line-height:1;
}
.bp-next-rule{height:2px;background:var(--ct-ink);margin:18px 0 26px;}
.bp-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.bp-next-card{
  display:flex;flex-direction:column;padding:22px 24px 24px;background:var(--ct-cream);
  border:1px solid var(--ct-line);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
.bp-next-card:hover{border-color:var(--ct-ink);transform:translateY(-3px);}
.bp-next-cat{margin:0 0 12px;color:var(--ct-red-ink);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;}
.bp-next-title{margin:0 0 20px;color:#0E1013;font-size:17px;line-height:1.26;font-weight:900;letter-spacing:-.015em;text-transform:uppercase;}
.bp-next-card:hover .bp-next-title{text-decoration:underline;text-underline-offset:4px;}
.bp-next-more{display:inline-flex;align-items:center;gap:9px;margin-top:auto;color:#0E1013;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.bp-next-more svg{width:15px;height:15px;color:var(--ct-red-ink);flex:none;}

.bp-hero :focus-visible,.bp-toc :focus-visible{outline-color:#fff;}
.bp-sec,.bp-faq{scroll-margin-top:24px;}

/* ==================================================== responsive */
@media (max-width:880px){
  .bp-col,.bp-wide{padding:0 20px;}
  .bp-hero{padding:24px 0 36px;}
  .bp-body{padding:34px 0 48px;}
  .bp-toc ol{grid-template-columns:1fr;gap:12px;}
  .bp-author-top{grid-template-columns:1fr;gap:16px;}
  .bp-next-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .bp-next-card{transition:none;}
  .bp-next-card:hover{transform:none;}
}