/* Red Van blog post template (2026). Requires the Red Van tokens (colors_and_type.css → --rv-*). */

.rv-post { color: var(--rv-ink); font-family: var(--rv-font-body); }
.rv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.rv-wrap--wide { max-width: 1280px; }

/* Reading progress */
.rv-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; pointer-events: none; }
.rv-progress span { display: block; height: 100%; width: 0; background: var(--rv-red); transition: width 80ms linear; }

/* ---------- Header block — aligned to the article column (sidebar 220 + gap 64 offset on wide) ---------- */
.rv-post-head { padding: 40px 0; }
@media (min-width: 1080px) { .rv-post[data-toc="sidebar"] }

.rv-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; font: 400 14px/1.4 var(--rv-font-body); color: var(--rv-fg-muted); }
.rv-crumbs a { color: var(--rv-fg-muted); font-weight: 400; }
.rv-crumbs [aria-current] { color: var(--rv-ink); }

.rv-eyebrow { font: 500 14px/1 var(--rv-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--rv-red); margin-bottom: 20px; }
.rv-post-title { font: 600 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1.08 var(--rv-font-display); letter-spacing: -.01em; margin: 0 0 24px; text-wrap: balance; }
.rv-accent { color: var(--rv-red); }
.rv-dek { font: 400 clamp(1.1rem, 1rem + .3vw, 1.3rem)/1.6 var(--rv-font-body); color: var(--rv-fg-muted); margin: 0 0 36px; text-wrap: pretty; }

.rv-byline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px 0;
  
  /* 1. Added position relative so the pseudo-elements align to this block */
  position: relative; 
}
/* 2. Top Border Styling */
.rv-byline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 1px;
  background-color: var(--rv-rule);
}
/* 3. Bottom Border Styling */
.rv-byline::after {  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 1px;
  background-color: var(--rv-rule);
}
.rv-byline__who { display: flex; align-items: center; gap: 14px; }
.rv-byline__name { display: block; font: 600 15px/1.2 var(--rv-font-display); color: var(--rv-ink); margin-bottom: 4px; }
.rv-byline__meta { display: flex; flex-wrap: wrap; gap: 8px; font: 400 14px/1.3 var(--rv-font-body); color: var(--rv-fg-muted); }
.rv-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--rv-bone); overflow: hidden; flex: none; display: grid; place-items: center; margin-left:10px; }
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-avatar--lg { width: 56px; height: 56px; }

/* Listen pill */
.rv-listen { display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 14px; border: 1px solid var(--rv-ink); border-radius: 50px; background: transparent; color: var(--rv-ink); font: 500 14px/1 var(--rv-font-display); cursor: pointer; transition: background-color 150ms, color 150ms; }
.rv-listen:hover { background: var(--rv-ink); color: var(--rv-white); }
.rv-listen__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--rv-red); color: var(--rv-white); display: grid; place-items: center; }
.rv-listen__dot svg { width: 8px; height: 8px; fill: currentColor; }
.rv-listen__time { opacity: .6; }

/* ---------- Lead row: Key Takeaways (2fr) + media (1fr) ---------- */
.rv-lead { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 64px; }
.rv-takeaways { flex: 2 1 440px; background: var(--rv-bone); padding: clamp(28px, 3vw, 40px); max-width:800px; }
.rv-takeaways .rv-label { color: var(--rv-red); margin-bottom: 14px; font-size: 13px; }
.rv-takeaways h2 { font: 500 22px/1.3 var(--rv-font-display); margin: 0 0 16px; }
.rv-takeaways p { font: 400 17px/1.7 var(--rv-font-body); margin: 0 0 16px; }
.rv-takeaways ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 400 16px/1.6 var(--rv-font-body); }
.rv-takeaways li::marker { color: var(--rv-red); }
.rv-lead__media { flex: 1 1 280px; min-height: 260px; margin: 0; position: relative; background: var(--rv-bone); }
.rv-lead__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-lead__media--pattern { background: var(--rv-red-950) var(--rv-pattern-dark-red) center / cover; }

/* ---------- Body grid: sticky TOC (220) + article (≤760) ---------- */
.rv-body-grid { display: flex; gap: 64px; align-items: flex-start; }
.rv-toc-side { display: none; width: 220px; flex: none; position: sticky; top: 102px; max-height: calc(100vh - 120px); overflow: auto; padding-bottom: 24px; }
.rv-toc-side .rv-btn { margin-top: 28px; padding: 10px 20px; white-space: normal; text-align: center; }
.rv-toc { display: grid; border-left: 1px solid var(--rv-rule); }
.rv-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--rv-fg-muted); font: 400 13px/1.45 var(--rv-font-body); text-wrap: pretty; }
.rv-toc a[aria-current="true"] { border-left-color: var(--rv-red); color: var(--rv-ink); font-weight: 600; }
.rv-label { font: 500 12px/1 var(--rv-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--rv-fg-muted); margin-bottom: 16px; }
.rv-toc-related { font: 500 12px/1 var(--rv-font-display); letter-spacing: .18em; color: var(--rv-fg-muted); margin-top:50px; margin-bottom:16px; }
.rv-tags { list-style: none; margin: 0; padding: 0; display: block;}
.rv-tags a { display: block; padding: 9px 5px; color: var(--rv-fg-muted); font: 500 13px/1 var(--rv-font-display); text-transform: capitalize; text-decoration: underline; }
.rv-tags a:hover { color: var(--rv-ink); opacity: 1; }

.rv-toc-inline { border: 1px solid var(--rv-rule); padding: 20px 24px; margin: 0 0 48px; }
.rv-toc-inline summary { list-style: none; cursor: pointer; font: 500 13px/1 var(--rv-font-display); letter-spacing: .18em; text-transform: uppercase; }
.rv-toc-inline summary::-webkit-details-marker { display: none; }
.rv-toc-inline ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 6px; font: 400 15px/1.5 var(--rv-font-body); }
.rv-toc-inline a { color: var(--rv-ink); font-weight: 400; }

@media (min-width: 1080px) {
  .rv-post[data-toc="sidebar"] .rv-toc-side { display: block; }
  .rv-post[data-toc="sidebar"] .rv-toc-inline { display: none; }
}

.rv-article { flex: 1; min-width: 0; max-width: 760px; }

/* ---------- Rich text body ---------- */
.rv-post-body { font: 400 18px/1.75 var(--rv-font-body); counter-reset: rv-h2; }
.rv-post-body > p:first-child { font-size: 22px; line-height: 1.6; }
.rv-post-body p { margin: 0 0 24px; font: inherit; text-wrap: pretty; letter-spacing: 0; }
.rv-post-body a { color: var(--rv-red); font-weight: 600; }
.rv-post-body h2 { font: 500 clamp(1.5rem, 1.25rem + .7vw, 1.85rem)/1.25 var(--rv-font-display); margin: 64px 0 20px; scroll-margin-top: 100px; text-wrap: balance; }
.rv-post-body h3 { font: 500 1.5rem/1.35 var(--rv-font-display); margin: 30px 0 14px; scroll-margin-top: 100px; }
.rv-post-body[data-numbered="true"] h2:not(.rv-unnumbered) { display: flex; gap: 16px; align-items: baseline; counter-increment: rv-h2; }
.rv-post-body[data-numbered="true"] h2:not(.rv-unnumbered)::before { content: counter(rv-h2, decimal-leading-zero); flex: none; width: 28px; font: 600 15px/1 var(--rv-font-display); letter-spacing: .1em; color: var(--rv-red); }
.rv-post-body ul, .rv-post-body ol { margin: 0 0 24px; padding-left: 22px; display: grid; gap: 6px; }
.rv-post-body li::marker { color: var(--rv-red); }
.rv-post-body img { max-width: 100%; height: auto; }
.rv-post-body blockquote { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--rv-red); font: 500 clamp(1.35rem, 1.15rem + .6vw, 1.7rem)/1.4 var(--rv-font-display); text-wrap: balance; }
.rv-post-body blockquote p { margin: 0; font: inherit; }
.rv-post-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.rv-post-body th, .rv-post-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rv-rule); vertical-align: top; }
.rv-post-body th { font: 600 14px/1.4 var(--rv-font-display); border-bottom-color: var(--rv-ink); }

/* Body pattern: source / citation note  — <aside class="rv-source"><div class="rv-source__label">Source</div><p>…</p></aside> */
.rv-source { margin: 0 0 24px; padding: 20px 24px; border: 1px solid var(--rv-rule); display: grid; gap: 8px; }
.rv-source__label { font: 500 12px/1 var(--rv-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--rv-blue-700); }
.rv-source p { margin: 0; font: 400 16px/1.65 var(--rv-font-body); }

/* Body pattern: definition rows — <dl class="rv-defs"><div><dt>Critical</dt><dd>…</dd></div>…</dl> */
.rv-defs { margin: 0 0 24px; display: grid; border-top: 1px solid var(--rv-rule); }
.rv-defs > div { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rv-rule); }
.rv-defs dt { font: 600 16px/1.5 var(--rv-font-display); }
.rv-defs dd { margin: 0; font: 400 16px/1.6 var(--rv-font-body); }
.rv-defs > div:first-child dt { color: var(--rv-red); }

/* Body pattern: numbered cards — <ol class="rv-cards"><li>What failed?</li>…</ol> */
.rv-post-body ol.rv-cards { list-style: none; padding: 0; counter-reset: rv-card; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rv-cards li { counter-increment: rv-card; background: var(--rv-bone); padding: 20px; display: grid; gap: 10px; font: 600 18px/1.35 var(--rv-font-display); }
.rv-cards li::before { content: counter(rv-card, decimal-leading-zero); font: 600 13px/1 var(--rv-font-display); letter-spacing: .1em; color: var(--rv-red); }

/* Body pattern: ruled numbered list — <ol class="rv-steps">…</ol> */
.rv-post-body ol.rv-steps { list-style: none; padding: 0; gap: 0; counter-reset: rv-step; border-top: 1px solid var(--rv-rule); }
.rv-steps li { counter-increment: rv-step; display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rv-rule); }
.rv-steps li::before { content: counter(rv-step); width: 24px; flex: none; font: 600 14px/1 var(--rv-font-display); color: var(--rv-red); }

/* Body pattern: big stat — <div class="rv-stat"><div class="rv-stat__num">150%</div><p>…</p></div> */
.rv-stat { margin: 32px 0; padding: 28px 0; border-top: 1px solid var(--rv-ink); border-bottom: 1px solid var(--rv-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.rv-stat__num { font: 600 clamp(3rem, 2.4rem + 2vw, 4.4rem)/1 var(--rv-font-display); letter-spacing: -.02em; color: var(--rv-red); }
.rv-stat p { margin: 0; flex: 1; min-width: 220px; font: 400 17px/1.6 var(--rv-font-body); }

/* ---------- CTA block ---------- */
.rv-cta { margin: 56px 0 0; padding: clamp(32px, 5vw, 56px); background: var(--rv-red-950) var(--rv-pattern-dark-red) center / cover; color: var(--rv-white); display: grid; gap: 20px; justify-items: start; }
.rv-cta .rv-label { color: #FFFFFF; margin: 0; font-size: 13px; }
.rv-cta h2 { font: 500 clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem)/1.05 var(--rv-font-display); margin: 0; }
.rv-cta p { font-weight: 500; margin: 0; max-width: 520px; color: #FFFFFF; }
.rv-cta .rv-btn { white-space: normal; text-align: center; }

/* ---------- FAQ ---------- */
.rv-faq { margin: 72px 0 0; }
.rv-faq h2 { font: 500 clamp(1.5rem, 1.25rem + .7vw, 1.85rem)/1.25 var(--rv-font-display); margin: 0 0 8px; }
.rv-faq__rule { width: 64px; height: 4px; background: var(--rv-red); margin: 0 0 24px; }
.rv-faq__list { border-top: 1px solid var(--rv-rule); }
.rv-faq details { border-bottom: 1px solid var(--rv-rule); }
.rv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font: 600 18px/1.4 var(--rv-font-display); }
.rv-faq summary::-webkit-details-marker { display: none; }
.rv-faq summary::after { content: "+"; color: var(--rv-red); font-weight: 400; font-size: 24px; line-height: 1; transition: transform 300ms var(--rv-ease-out); }
.rv-faq details[open] summary::after { transform: rotate(45deg); }
.rv-faq__a { margin: 0 0 22px; max-width: 640px; font: 400 17px/1.7 var(--rv-font-body); }
.rv-faq__a p { margin: 0 0 12px; }

/* ---------- Footer: tags + author ---------- */
.rv-post-foot { margin: 64px 0 0; display: grid; gap: 32px; }
.rv-author { display: flex; gap: 20px; align-items: flex-start; padding: 28px 0; border-top: 1px solid var(--rv-ink); border-bottom: 1px solid var(--rv-rule); }
.rv-author .rv-label { margin-bottom: 6px; }
.rv-author__name { display: block; font: 600 18px/1.3 var(--rv-font-display); color: var(--rv-ink); margin-bottom: 6px; }
.rv-author__bio { margin: 0; font: 400 15px/1.65 var(--rv-font-body); color: var(--rv-fg-muted); }

/* ---------- Keep Reading ---------- */
.rv-related { background: var(--rv-bone); margin-top: 96px; padding: 72px 0; }
.rv-related h2 { font: 500 clamp(1.5rem, 1.25rem + .7vw, 1.85rem)/1.25 var(--rv-font-display); margin: 0 0 32px; }
.rv-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.rv-related__card { background: var(--rv-white); border: 1px solid rgba(23, 23, 23, .1); padding: 28px; display: grid; gap: 14px; align-content: start; color: var(--rv-ink); font-weight: 400; transition: box-shadow 300ms var(--rv-ease-out); }
.rv-related__card:hover { box-shadow: var(--rv-shadow-card); opacity: 1; }
.rv-related__kind { font: 500 12px/1 var(--rv-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--rv-red); }
.rv-related__title { font: 600 20px/1.3 var(--rv-font-display); }
.rv-related__cta { font: 600 14px/1 var(--rv-font-display); }
.rv-related__cta::after { content: " →"; }

@media (prefers-reduced-motion: reduce) { .rv-progress span, .rv-faq summary::after { transition: none; } html { scroll-behavior: auto; } }