/* EXPANDED MENU: TAGLINE BESIDE THE LOGO */

body #exploreMenu .exploreHeader {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

body #exploreMenu .exploreHeader > .eyebrow {
  display: block !important;
  flex: 0 1 auto;
  max-width: 24ch;
  margin: 0 0 0 auto !important;
  text-align: right;
}

/* STABLE LOGO DURING THE INITIAL SCROLL */

body:not(.frontierCompactHeader) #header > .wordmark {
  font-size: 29px !important;
  transform: none !important;
  transition: none !important;
}

body #header > .wordmark > span {
  transition: none !important;
}

@media (max-width: 1000px) {
  body:not(.frontierCompactHeader) #header > .wordmark {
    font-size: 26px !important;
  }
}

@media (max-width: 700px) {
  body:not(.frontierCompactHeader) #header > .wordmark {
    font-size: 24px !important;
  }

  body #exploreMenu .exploreHeader {
    gap: 14px;
  }

  body #exploreMenu .exploreHeader > .eyebrow {
    max-width: 18ch;
    font-size: 10px;
  }
}

/* REMOVE THE RULE ABOVE THE RIDING SECTION */

body #riding .rideFieldHeader {
  display: none !important;
}

/* MATCHING FILM DIALOGS */

body #filmDialog,
body #aldarDialog {
  box-sizing: border-box;
  width: min(1080px, 94vw) !important;
  width: min(
    1080px,
    94vw,
    calc((92svh - 210px) * 1.777778 + 48px)
  ) !important;
  max-width: 94vw !important;
  max-height: 92svh !important;
  padding: 40px 24px 24px !important;
  border: 0;
  color: #F2F0E9;
  background: #202522;
  overflow-y: auto;
}

body #filmDialog .frontierFilmHeading,
body #aldarDialog .aldarDialogHeading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 128px !important;
  min-height: 128px;
  margin: 0 0 18px !important;
}

body #filmDialog .frontierFilmHeading h2,
body #aldarDialog .aldarDialogHeading h2 {
  margin: 0 !important;
  color: #F2F0E9;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
}

body #aldarDialog .aldarDialogHeading > .eyebrow {
  margin: 0 0 8px;
}

body #aldarDialog .aldarDialogHeading > p:last-child {
  margin: 8px 0 0;
}

body #filmPlayer,
body #aldarPlayer {
  position: relative;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0;
  overflow: hidden;
  background: #141916;
}

body #filmPlayer iframe,
body #filmPlayer video,
body #aldarPlayer iframe,
body #aldarPlayer video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

body #filmDialog > .close,
body #aldarDialog > .close {
  top: 8px;
  right: 16px;
  color: #F2F0E9;
}

body #filmDialog::backdrop,
body #aldarDialog::backdrop {
  background: rgba(15, 19, 17, .88);
  backdrop-filter: blur(8px);
}