/* ree-source.com home page v-next (shorter). Loaded after site.css and qual-flow.css.
   Uses the site.css variables only; site.css itself is not changed.
   Tighter rhythm modeled on /owner-conversation v5. */

/* Hero: headline plus the approved positioning statement, then straight into the fit check */
.hv-hero { padding: 76px 0 36px; }
.hv-positioning {
  margin-top: 22px;
  max-width: 54ch;
  color: var(--ink);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Videos: all three in one row, equal width, headline above each video.
   3 columns from 900px up; a single stack below that (phones and tablets). */
.hv-videos { padding: 56px 0; border-top: 1px solid var(--hairline); }
.hv-videos .wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.hv-item { position: relative; min-width: 0; }
/* Line up the three videos even when one headline or subline wraps (subgrid rows: headline, subline, video). */
@supports (grid-template-rows: subgrid) {
  .hv-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.hv-item > .anchor-alias { position: absolute; top: -80px; left: 0; }
.hv-title {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.22;
  max-width: none;
  text-wrap: balance;
}
.hv-caption { margin-top: 8px; color: var(--body); font-size: 0.95rem; line-height: 1.5; max-width: 60ch; text-wrap: pretty; }

.hv-frame {
  position: relative;
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--card);
  overflow: hidden;
}
.hv-frame video,
.hv-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No mp4 on the server yet: poster plus a quiet label, no player */
.hv-soon img { opacity: 0.72; }
.hv-soon-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(10, 10, 10, 0.78);
  color: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* About me: baseline "Who builds this" layout, shorter */
.hv-about { padding: 64px 0; border-top: 1px solid var(--hairline); }
.hv-about h2 { max-width: 20ch; }
.hv-about-lead {
  margin-top: 18px;
  max-width: 44ch;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.5;
}
.hv-about-list li { line-height: 1.55; }
.hv-about-list li strong { margin-bottom: 2px; }
.hv-about-note { margin-top: 16px; font-size: 0.88rem; }

@media (max-width: 899px) {
  .hv-videos .wrap { grid-template-columns: 1fr; gap: 36px; max-width: 720px; }
  .hv-title { font-size: clamp(1.3rem, 4.4vw, 1.6rem); }
}
@media (max-width: 640px) {
  .hv-hero { padding: 52px 0 24px; }
  .hv-videos { padding: 40px 0; }
  .hv-about { padding: 44px 0; }
  .hv-frame { border-radius: 12px; }
  .hv-soon-label { left: 10px; bottom: 10px; font-size: 0.72rem; }
}

/* Oct 9, 2026: headline and a compact overview video side by side.
   Headline gets the larger share; video stays small. Stacks on phones. */
.hv-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: 40px;
  align-items: center;
}
.hv-hero-video { justify-self: end; width: 100%; max-width: 500px; }
.hv-hero-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--card);
  object-fit: cover;
}
@media (max-width: 960px) {
  .hv-hero-row { grid-template-columns: 1fr; gap: 24px; }
  .hv-hero-video { justify-self: start; max-width: 420px; }
}

/* Oct 9, 2026 (v4/v5): subtext no wider than the headline. v5: video back inside the container, row centered as one unit. */
.hv-hero-text { width: fit-content; max-width: 100%; }
.hv-hero-text .hv-positioning { width: 0; min-width: 100%; max-width: none; }
@media (max-width: 960px) {
  .hv-hero-text .hv-positioning { width: auto; min-width: 0; max-width: 54ch; }
  .hv-hero-video { width: 100%; max-width: 420px; margin-right: 0; }
  .hv-hero-video video { border-radius: 12px; border-right: 1px solid var(--hairline); }
}

/* v5: headline + 500px video centered together as one unit (no empty gap between them). */
.hv-hero-row { grid-template-columns: minmax(0, 520px) minmax(0, 500px); gap: clamp(40px, 6vw, 100px); justify-content: center; }
.hv-hero-row .hv-hero-text { width: auto; }
.hv-hero-row h1 { max-width: none; }
.hv-hero-video { justify-self: stretch; }
@media (max-width: 960px) {
  .hv-hero-row { grid-template-columns: 1fr; justify-content: stretch; }
  .hv-hero-video { justify-self: start; margin-right: 0; }
  .hv-hero-video video { border-right: 1px solid var(--hairline); }
}