/* =========================================================================
   reelee.org — homepage v3 (2026-11): layout for the "AI studio" homepage.
   Loaded after styles.css by index.html only; uses its tokens, adds no new
   colours or fonts. /training/, /articles/ and the frozen /v2/ never load it.
   ========================================================================= */

/* ---- hero: copy left, moving picture right ---------------------------- */
.hero-split { padding-bottom: clamp(56px, 9vw, 110px); }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
.hero-split h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.4rem); line-height: 0.98; margin-bottom: 26px;
}
.hero-split h1 .accent { color: var(--accent); font-style: italic; }

.mediums { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mediums li {
  font: 500 0.85rem var(--font-sans); color: var(--fg-secondary);
  padding: 7px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
}
.mediums li.more { border: 0; background: none; padding-inline: 4px; color: var(--fg-subtle); }

.hero-lede {
  margin: 0 0 32px; max-width: 34ch;
  font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--fg-secondary);
  padding-left: 18px; border-left: 2px solid var(--accent);
}
.hero-split .hero-cta { justify-content: flex-start; }

.hero-media { margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.hero-media .frame { aspect-ratio: 576 / 768; }
.hero-media figcaption,
.clip-tags {
  margin-top: 10px; font: 400 0.72rem var(--font-mono); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--fg-subtle);
}
.hero-media figcaption span { color: var(--accent); }

/* a section headed by its eyebrow alone sits close to its cards */
.section-head.eyebrow-only { margin-bottom: 26px; }

/* ---- who we are ------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.person {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 30px 30px 32px;
}
.person h3 { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.08; margin-bottom: 6px; }
.person .role {
  margin: 0 0 16px; font: 500 0.72rem var(--font-mono); letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: var(--accent);
}
.person p:last-child { margin: 0; color: var(--fg-muted); font-size: 1rem; line-height: 1.6; max-width: 48ch; }

/* ---- what we do ------------------------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.offer {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 26px 24px 28px;
}
.offer .num {
  margin: 0 0 18px; font: 500 0.72rem var(--font-mono); letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: var(--fg-subtle);
}
.offer .num .emerging { color: var(--stale); }
.offer h3 { font-size: 1.45rem; line-height: 1.1; margin-bottom: 10px; }
.offer p:last-child { margin: 0; color: var(--fg-muted); font-size: 0.95rem; line-height: 1.5; }

/* ---- the work: three clips, equal heights, no cropping ----------------
   Column widths follow each video's own aspect ratio (576x768 vs 576x1040),
   so the frames line up at the same height and nothing is cut off. */
.clips {
  display: grid; gap: clamp(16px, 2.5vw, 28px); align-items: start;
  grid-template-columns: 1.354fr 1fr 1fr;   /* 1.354 = (576/768) / (576/1040) */
}
.clip .frame { background: #000; }
.clip-wide .frame { aspect-ratio: 576 / 768; }
.clip:not(.clip-wide) .frame { aspect-ratio: 576 / 1040; }
.clip .frame::after { display: none; }          /* no vignette over native controls */
.clip video { object-fit: contain; }
.clip-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.clip-tags .warn {
  color: var(--stale); border: 1px solid currentColor; border-radius: var(--radius-xs);
  padding: 2px 7px; font-size: 0.64rem;
}
.clip h3 { font-size: 1.5rem; line-height: 1.1; margin-bottom: 8px; }
.clip p:last-child { margin: 0; color: var(--fg-muted); font-size: 0.95rem; line-height: 1.5; }

/* ---- working with us -------------------------------------------------- */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); }
.term { padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.term h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; margin-bottom: 8px; }
.term p { margin: 0; color: var(--fg-muted); font-size: 0.97rem; line-height: 1.55; }
.term-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;
  font: 500 0.9rem var(--font-sans);
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { justify-self: start; max-width: 420px; }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .clips { grid-template-columns: 1fr 1fr; }
  .clip-wide { grid-column: 1 / -1; max-width: 520px; }
  .terms { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .people, .offer-grid, .clips { grid-template-columns: 1fr; }
  .hero-split h1 { font-size: clamp(2.5rem, 12vw, 3.3rem); }
  .clip, .clip-wide { max-width: 360px; width: 100%; justify-self: center; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
@media (pointer: coarse) {
  .theme-toggle, .nav-toggle { width: 44px; height: 44px; }
  .nav-links a, .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
}