/* RV Tech page — builds on site.css tokens. */

.rv-hero { background: var(--warm-dark); color: var(--cream); padding: 4rem 2rem 3.5rem; text-align: center; }
.rv-hero .hero-eyebrow { color: var(--amber); }
.rv-hero h1 { font-family: 'Lora', serif; font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 600; line-height: 1.2; margin: 0 0 1rem; }
.rv-hero p { color: rgba(250,247,242,0.7); max-width: 620px; margin: 0 auto; font-size: 1.02rem; }

.rv-stats { display: flex; justify-content: center; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.rv-stat { text-align: center; }
.rv-stat .num { font-family: 'Lora', serif; font-size: 1.9rem; font-weight: 600; color: var(--amber); display: block; line-height: 1.2; }
.rv-stat .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(250,247,242,0.5); }

/* Alternating section tint so the page reads as chapters. */
.rv-section { padding: 3.5rem 2rem; }
.rv-section--tint { background: #fff; border-block: 1px solid var(--border); }

.rv-lede { font-size: 1.02rem; color: var(--warm-gray); max-width: 640px; margin-bottom: 2rem; }
.rv-body p { color: var(--warm-gray); font-size: 0.975rem; margin-bottom: 1rem; }
.rv-body p:last-child { margin-bottom: 0; }
.rv-body strong { color: var(--warm-dark); font-weight: 500; }

/* A single finding: what broke, what it means, what was built. */
.rv-finding { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 12px; padding: 1.4rem 1.6rem; margin-bottom: 1.25rem; }
.rv-finding h3 { font-family: 'Lora', serif; font-size: 1.08rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--warm-dark); }
.rv-finding p { font-size: 0.9rem; color: var(--warm-gray); margin-bottom: 0.75rem; }
.rv-finding p:last-child { margin-bottom: 0; }
.rv-finding--forest { border-left-color: var(--forest); }
.rv-finding--rust { border-left-color: var(--rust); }

/* Pull-quote for the one-line lesson worth remembering. */
.rv-takeaway { font-family: 'Lora', serif; font-size: 1.05rem; font-style: italic; color: var(--warm-dark); border-left: 3px solid var(--rust); padding: 0.4rem 0 0.4rem 1.1rem; margin: 1.5rem 0; }

/* Before/after numbers. */
.rv-numbers { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0; }
.rv-number { background: var(--cream); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1.1rem; flex: 1 1 140px; }
.rv-number .v { font-family: 'Lora', serif; font-size: 1.35rem; font-weight: 600; display: block; line-height: 1.2; }
.rv-number .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warm-gray); }
.rv-number--bad .v { color: var(--rust); }
.rv-number--good .v { color: var(--forest); }

.rv-next { background: var(--amber-light); border: 1px solid rgba(245,166,35,0.35); border-radius: 12px; padding: 1.4rem 1.6rem; }
.rv-next h3 { font-family: 'Lora', serif; font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; }
.rv-next p { font-size: 0.9rem; color: var(--warm-gray); margin: 0; }

@media (max-width: 720px) {
  .rv-section { padding: 2.75rem 1.25rem; }
  .rv-hero { padding: 3rem 1.25rem 2.5rem; }
  .rv-stats { gap: 1.5rem; }
}

/* Equipment tables — wide content scrolls inside itself, never the page. */
.rv-kit { margin-bottom: 2rem; }
.rv-kit h3 { font-family: 'Lora', serif; font-size: 1.05rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--warm-dark); }
.rv-kit h3 .rv-kit-sum { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 400; color: var(--warm-gray); margin-left: 0.5rem; }
.rv-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.rv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 460px; }
.rv-table th { text-align: left; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--warm-gray); padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.rv-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); color: var(--warm-gray); vertical-align: top; }
.rv-table tr:last-child td { border-bottom: 0; }
.rv-table td:first-child { color: var(--warm-dark); font-weight: 500; white-space: nowrap; }
.rv-table .num { text-align: right; white-space: nowrap; }
.rv-note { font-size: 0.85rem; color: var(--warm-gray); margin-top: 0.7rem; }
.rv-note--dead { color: var(--rust); }

/* Screenshot / photo figures. Captions carry the explanation, so a reader
   skimming only the images still gets the point. */
.rv-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 0; }
.rv-shot { margin: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rv-shot img { display: block; width: 100%; height: auto; cursor: zoom-in; background: var(--cream); }
.rv-shot figcaption { padding: 0.8rem 1rem; font-size: 0.82rem; color: var(--warm-gray); border-top: 1px solid var(--border); }
.rv-shot--wide { grid-column: 1 / -1; }
/* Screens are tall; cap them so one shot cannot own the whole viewport. */
.rv-shot--screen img { max-height: 620px; object-fit: contain; object-position: top; }