/* /vocal-chain — the landing page for the vocal-chain ad. The page is the home
   page's own blocks (site.css); this only adjusts what changes when the film
   opens the page instead of the hero. */

/* no hero under the fixed masthead, so the first section clears it itself */
.vc-top { padding-block-start: 130px; }

/* the line over the film: the film is the whole gift, no details needed */
.vc-free {
  margin-block-start: 28px;
  font-size: 24px;
  line-height: 1.4;
  text-align: right;
  color: var(--cream);
}
.vc-top .taste__player { margin-block-start: 28px; }

/* under the film: the join section's lede, and the form's bar button under it.
   On the desktop grid the button would sit beside the lede and read as apart
   from it, so the two stack in the middle of the page, the button at the
   large button's height. Phones already stack them full width */
@media (min-width: 901px) {
  .vc-next { grid-template-columns: max-content; justify-content: center; }
  .vc-next .join__lede { text-align: center; }
  /* the quieter line under the lede wraps to the lede's width, not its own */
  .vc-next .vc-pitch__body { width: 0; min-width: 100%; text-align: center; }
  .vc-next .btn-join--bar { min-width: 480px; height: 75px; }
  .vc-next .btn-join--bar span { font-size: 24px; }
}

/* the bar button over the ended film takes its label's width, not the player's */
.taste__end .btn-join--bar { width: auto; padding-inline: 28px; }

/* next to the form: a quieter line under the lede says what the form is for */
.vc-pitch__body {
  margin-block-start: 28px;
  max-width: 34em;
  font-size: 22px;
  line-height: 1.45;
  text-align: right;
  color: var(--chalk);
}
.vc-pitch__up {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .vc-top { padding-block-start: 110px; }
  .vc-free { font-size: 20px; }
  .vc-pitch__body { font-size: 19px; }
}
@media (max-width: 640px) {
  .vc-top { padding-block-start: 84px; }
  .vc-free { margin-block-start: 16px; font-size: 18px; }
  .vc-top .taste__player { margin-block-start: 20px; }
  .vc-pitch__body { margin-block-start: 16px; font-size: 17px; }
}