/* ============================================================
   Aurevon Studio: the reel (SaaS explainer video examples)
   Loads after site.css. The films lead; film cards come from
   site.css. What we make sits on the warm band below them.
   ============================================================ */

.reel-page { padding-top: clamp(150px, 18vh + 60px, 220px); }
.reel-head { padding-bottom: clamp(48px, 6vw, 80px); }
.reel-title {
  font-size: var(--fs-display); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98;
  max-width: 14ch; text-wrap: balance;
}
.reel-head .lead { margin-top: 28px; max-width: 52ch; }
.reel-films { padding-bottom: var(--section); }

.reel-make { background: var(--band); padding-block: var(--section); }
.make-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(40px, 7vw, 112px); align-items: start; }
.make-grid .lead { margin-top: 24px; max-width: 36ch; }
@media (max-width: 960px) { .make-grid { grid-template-columns: 1fr; } }
.reel-make .slate dd { font-weight: 400; color: var(--ink-2); }
.reel-make .slate dd strong { color: var(--ink); font-weight: 600; }
.reel-make + .close.compact { margin-top: 0; }