/* Home page: rules on top of theme.css. Owned by the home lane. */

/* hero: the video fills its box, never sets the hero's height.
   Every speaker in the video sits in the middle of the frame, so the video
   lives in the right 56% of the hero and the words sit on solid black to its
   left. The headline must never run across a face. */
#top.hero { min-height: 640px; }
#top .hero__media { overflow: hidden; left: 44%; }
#top .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
#top .hero__shade { background: linear-gradient(90deg, #0a0a0c 0%, #0a0a0c 44%, rgba(10, 10, 12, 0.6) 50%, rgba(10, 10, 12, 0) 60%), linear-gradient(0deg, rgba(10, 10, 12, 0.5) 0%, rgba(10, 10, 12, 0) 40%); }
/* 5.4em holds the headline to four short lines at every size. One long line
   would reach the speaker. */
#top h1 { max-width: 5.4em; }
#top .lede { max-width: min(520px, 38vw); }
#top .btns { max-width: min(600px, 40vw); }
#top .btn { min-height: 58px; font-size: 23px; padding: 0 32px; }
#top .play { min-height: 58px; }

/* how: tiles in a row, sized like the mockup */
#how .grid--3 { margin-top: 20px; }
#how .tile h3 { font-size: clamp(32px, 3.2vw, 40px); }

/* signs: photo fills its column */
#signs .photo { position: relative; }
#signs .photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
#signs .ruled li { font-size: 21px; }

/* events and cards */
#events .rows { margin-top: 6px; }
#events + .section { padding: 96px 0; }
.card img.icon { width: 38px; height: 38px; }

/* red band */
#help { padding: 112px 0; }
#help h2 { font-size: clamp(56px, 8.2vw, 112px); line-height: 0.92; }
#help .lede { max-width: 680px; font-weight: 500; }

@media (max-width: 639px) {
  /* Phone: no room beside the speaker, so the video sits above the words. */
  #top.hero { min-height: 0; flex-direction: column; align-items: stretch; }
  #top .hero__media { position: relative; inset: auto; left: auto; width: 100%; aspect-ratio: 16 / 9; }
  #top .hero__shade { display: none; }
  #top .hero__body { padding-top: 32px; padding-bottom: 48px; gap: 20px; }
  #top h1 { font-size: clamp(46px, 14.5vw, 64px); }
  #top .lede { font-size: 20px; max-width: none; }
  #top .btns { max-width: none; flex-direction: column; align-items: stretch; gap: 8px; }
  #top .btns .btn { justify-content: center; width: 100%; }
  #top .btns .play { align-self: center; }
  #how .tile { min-height: 150px; padding: 24px; }
  #signs .photo { min-height: 280px; }
  #signs .btn { width: 100%; justify-content: center; }
  #help { padding: 72px 0; }
  #help .btn { width: 100%; justify-content: center; }
  #events + .section { padding: 56px 0; }
  .section { padding: 64px 0; }
}