/* The App Store video on the homepage, under the flyer: plays muted on a loop while it is on screen,
   the gold button (or a tap on the video) turns the sound on and off. Phones get the 960px file, computers the 1280px one. */
.trailer{position:relative;width:min(880px,100%);margin:34px auto 0;border:5px solid var(--navy);border-radius:20px;overflow:hidden;background:var(--navy);box-shadow:0 7px 0 var(--grass-d)}
.trailer video{display:block;width:100%;height:auto;aspect-ratio:1280/590;background:var(--navy);cursor:pointer}
.trailer-sound{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;margin:0;padding:7px 14px 5px 10px;
  font:400 16px/1 Luckiest,Impact,sans-serif;letter-spacing:.5px;color:var(--navy);background:var(--gold);border:3px solid var(--navy);border-radius:999px;
  box-shadow:0 3px 0 var(--navy);cursor:pointer;-webkit-tap-highlight-color:transparent}
.trailer-sound[hidden]{display:none}
.trailer-sound:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.trailer-sound:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.trailer-sound svg{width:20px;height:20px;margin-top:-3px;flex:none;fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.trailer-sound .spk{fill:var(--navy)}
.trailer-sound .on,.trailer.sound-on .trailer-sound .off{display:none}
.trailer.sound-on .trailer-sound .on{display:inline}
@media (max-width:520px){
  .trailer{border-width:4px;border-radius:16px}
  .trailer-sound{left:8px;bottom:8px;padding:5px 10px 3px 7px;font-size:13px;gap:5px;border-width:2px;box-shadow:0 2px 0 var(--navy)}
  .trailer-sound svg{width:16px;height:16px}
}