/*
 * /watch, where an outreach link lands. Refreshed on 8 October 2026.
 *
 * Wears landing.css, so the ground, the type and the closing panel are the
 * landing page's own. This file only re-sizes the heading, frames the film the
 * way the landing page frames it, and turns the old card into the landing
 * page's deep closing panel. `watch.js` and the markup it binds to are as they
 * were.
 *
 * Loaded before shell.css, whose `.watch-*` rules are the same strength, so
 * every rule here carries the `.wt` prefix.
 */

.wt .wt-page { gap: 0; padding-top: 0; }

.wt .wt-head {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 64px 0 36px;
  text-align: center;
}
.wt .watch-title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.wt .watch-lede { margin: 0; max-width: 54ch; font-size: 17px; }

.wt .watch-frame {
  width: 100%;
  max-width: 980px;
  justify-self: center;
  margin: 0;
  border-radius: 26px;
  box-shadow: var(--shadow-float);
}
.wt .watch-pill-icon { background: #1e1810; color: #fbf8f2; }
.wt .watch-play:focus-visible { outline-color: #fbf8f2; }

/* The old card, as the landing page's closing panel. */
.wt .wt-closer {
  margin-top: 72px;
  border: 0;
  border-radius: 28px;
  background: var(--lp-deep);
  color: var(--lp-on-deep);
  padding: 64px 28px;
}
.wt .watch-card-title {
  max-width: 20ch;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--lp-on-deep);
}
.wt .watch-card-lede { margin: 0; color: color-mix(in srgb, var(--lp-on-deep) 80%, transparent); }
.wt .watch-actions { margin-top: 8px; }
.wt .watch-terms { margin: 4px 0 0; color: color-mix(in srgb, var(--lp-on-deep) 68%, transparent); }

@media (max-width: 560px) {
  .wt .wt-head { padding: 36px 0 24px; }
  .wt .watch-frame { border-radius: 18px; }
  .wt .wt-closer { margin-top: 48px; padding: 48px 20px; }
}