/* The first screen is a race poster: clear runners, event identity, and a moving course line. */
body.ir-site .site-header.run-navigation {
  --nav-bg: #123d36;
  --nav-accent: #c6e77c;
  border-bottom: 2px solid #a6cb4a !important;
  background: #123d36 !important;
  box-shadow: 0 8px 24px rgba(6, 32, 28, .18) !important;
}

body.ir-site .run-navigation .brand-event {
  transition: transform 240ms ease;
}

body.ir-site .run-navigation .brand-event:hover { transform: translateX(3px); }
body.ir-site .run-navigation .brand-event-wordmark b { color: #fff !important; }
body.ir-site .run-navigation .brand-event-wordmark small { color: #c6e77c !important; }

body.ir-site .run-navigation .nav-group > button,
body.ir-site .run-navigation .nav-result {
  position: relative;
  overflow: hidden;
  color: #f1f7f2 !important;
  transition: background-color 220ms ease, color 220ms ease !important;
}

body.ir-site .run-navigation .nav-group > button:hover,
body.ir-site .run-navigation .nav-group > button:focus-visible,
body.ir-site .run-navigation .nav-group.open > button,
body.ir-site .run-navigation .nav-result:hover,
body.ir-site .run-navigation .nav-result:focus-visible {
  background: #245449 !important;
  color: #d7f39c !important;
}

body.ir-site .run-navigation .nav-group > button::before,
body.ir-site .run-navigation .nav-result::after {
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 10px;
  display: block !important;
  width: auto;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #c6e77c 0 84%, #fff 84% 100%);
  content: "" !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms ease;
}

body.ir-site .run-navigation .nav-group > button:hover::before,
body.ir-site .run-navigation .nav-group > button:focus-visible::before,
body.ir-site .run-navigation .nav-group.open > button::before,
body.ir-site .run-navigation .nav-result:hover::after,
body.ir-site .run-navigation .nav-result:focus-visible::after {
  transform: scaleX(1);
}

body.ir-site .run-navigation .header-login {
  border-color: #7da99b !important;
  background: transparent !important;
  color: #fff !important;
}

body.ir-site .run-navigation .header-login:hover { background: #245449 !important; }
body.ir-site .run-navigation .header-register { box-shadow: 0 4px 0 rgba(0, 0, 0, .15) !important; }
body.ir-site .run-navigation .header-register:hover { transform: translateY(-2px); }

body.ir-site .run-navigation .menu-toggle,
body.ir-site .run-navigation .account-trigger {
  border-color: #c6e77c !important;
  background: #dceca9 !important;
  color: #123d36 !important;
}

body.ir-site .run-navigation .menu-toggle:hover,
body.ir-site .run-navigation .account-trigger:hover { background: #f0f8d5 !important; }

body.ir-site .run-navigation .nav-dropdown,
body.ir-site .run-navigation .nav-dropdown-right,
body.ir-site .run-navigation .account-menu {
  border-top: 3px solid #a6cb4a !important;
  background: #fff !important;
}

body.ir-site .run-navigation .nav-dropdown > small { color: #0f797b !important; }
body.ir-site .run-navigation .nav-dropdown > a { color: #173d37 !important; }
body.ir-site .run-navigation .nav-dropdown > a:hover,
body.ir-site .run-navigation .nav-dropdown > a:focus-visible {
  background: #edf5ee !important;
  color: #0b6c73 !important;
}

body.ir-site .run-navigation :focus-visible {
  outline: 2px solid #c6e77c !important;
  outline-offset: 3px;
}

body.ir-site main#mainContent > .hero {
  height: min(690px, calc(100svh - 138px)) !important;
  min-height: 620px !important;
  background-color: #0b302a !important;
}

body.ir-site .hero-image-scrim {
  background: linear-gradient(90deg,
    rgba(5, 35, 31, .98) 0%,
    rgba(5, 35, 31, .88) 34%,
    rgba(5, 35, 31, .40) 64%,
    rgba(5, 35, 31, .04) 100%),
    linear-gradient(0deg, rgba(5, 35, 31, .58), transparent 35%) !important;
}

body.ir-site .hero-copy {
  top: 52px !important;
  left: 0;
  width: min(710px, 61%) !important;
  max-width: none;
  padding: 0 20px 0 var(--page);
  transform: none !important;
  animation: none !important;
}

body.ir-site .hero-edition {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 19px;
  color: #f0f6eb !important;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

body.ir-site .hero-edition-mark {
  width: 24px;
  height: 3px;
  flex: 0 0 24px;
  background: #eb6a58;
}

body.ir-site .hero-edition-separator { color: #b9dc74; }

body.ir-site .hero h1.hero-event-name {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  max-width: none;
  margin: 0 0 15px !important;
  overflow: visible !important;
}

body.ir-site .hero-event-logo.hero-event-brand {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 19px;
}

body.ir-site .hero-event-brand img {
  width: 78px !important;
  height: 92px !important;
  margin-top: 2px;
  object-fit: contain;
}

body.ir-site .hero-event-brand > span {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

body.ir-site .hero-event-brand b {
  display: block;
  color: #fff !important;
  font-size: 72px !important;
  font-weight: 900;
  line-height: .85 !important;
  white-space: nowrap;
}

body.ir-site .hero-event-brand b em {
  display: block;
  color: #c6e77c;
  font-style: normal;
}

body.ir-site .hero-event-brand small {
  margin-top: 4px;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0 !important;
}

body.ir-site .hero .eyebrow.light {
  margin: 0 0 12px;
  color: #c6e77c !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body.ir-site .hero .hero-intro {
  max-width: 510px;
  margin: 0 0 22px;
  color: #f3f7f3 !important;
  font-size: 16px;
  line-height: 1.55 !important;
}

body.ir-site .hero .button {
  min-height: 51px;
  padding: 13px 19px;
  font-size: 13px;
}

body.ir-site .hero .button-primary {
  background: #dd5346 !important;
  border-color: #dd5346 !important;
}

body.ir-site .hero .button-primary:hover {
  background: #bf4237 !important;
  border-color: #bf4237 !important;
}

body.ir-site .hero .availability { margin-top: 15px; }

.race-track {
  position: absolute;
  z-index: 2;
  right: var(--page);
  bottom: 124px;
  left: var(--page);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: 25px;
  color: #fff;
  pointer-events: none;
}

.race-track-start,
.race-track-finish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.race-track-start span { color: #c6e77c; }
.race-track-finish span { color: #c6e77c; }

.race-track-line {
  position: relative;
  display: block;
  height: 13px;
  border-top: 1px solid rgba(255, 255, 255, .67);
  border-bottom: 1px solid rgba(255, 255, 255, .44);
}

.race-track-line::after {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.52) 0 12px, transparent 12px 26px);
  content: "";
}

.race-track-pace {
  position: absolute;
  z-index: 1;
  top: -4px;
  left: 0;
  width: 19px;
  height: 19px;
  border: 5px solid #c6e77c;
  border-radius: 50%;
  background: #103c35;
  box-shadow: 0 0 0 3px rgba(16, 60, 53, .55);
}

.race-track-finish::before {
  width: 19px;
  height: 19px;
  background: conic-gradient(#fff 25%, #173d37 0 50%, #fff 0 75%, #173d37 0) 0 0 / 10px 10px;
  content: "";
}

body.ir-site .hero-facts {
  min-height: 105px;
  grid-template-columns: repeat(4, minmax(0, .82fr)) minmax(260px, 1.35fr) !important;
  border-top: 2px solid #a6cb4a !important;
  background: #123d36 !important;
  box-shadow: none;
  color: #fff;
}

body.ir-site .hero-facts > div {
  position: relative;
  gap: 7px;
  padding: 18px 22px;
  border-right: 1px solid rgba(210, 237, 218, .2) !important;
}

body.ir-site .hero-facts > div::before {
  position: absolute;
  top: 15px;
  right: 18px;
  color: #85b0a1;
  content: attr(data-lane);
  font-size: 10px;
  font-weight: 800;
}

body.ir-site .hero-facts > div > span {
  color: #bed8c9 !important;
  font-size: 11px;
}

body.ir-site .hero-facts > div > strong {
  color: #fff !important;
  font-size: 18px;
}

body.ir-site .hero-facts > div:hover { background: #1b4b43 !important; }

body.ir-site .hero-facts .countdown-wrap {
  padding-left: 25px;
  border: 0 !important;
  background: #dceca9 !important;
}

body.ir-site .hero-facts .countdown-wrap:hover { background: #dceca9 !important; }
body.ir-site .hero-facts .countdown-wrap > span,
body.ir-site .hero-facts .countdown small { color: #416149 !important; }
body.ir-site .hero-facts .countdown b strong { color: #123d36 !important; }

body.ir-site main#mainContent > section#event-calendar {
  background: #edf4ee !important;
}

@media (prefers-reduced-motion: no-preference) {
  .race-track-pace { animation: race-pace-run 8s linear infinite; }
  body.ir-site .hero-event-brand b em { animation: race-title-in .7s ease-out both; }
  body.ir-site .run-navigation .nav-group.open .nav-dropdown,
  body.ir-site .run-navigation .account-menu:not([hidden]) { animation: race-nav-enter 220ms ease-out both; }

  @keyframes race-pace-run {
    0% { left: 0; transform: scale(.82); }
    8%, 88% { transform: scale(1); }
    98%, 100% { left: calc(100% - 19px); transform: scale(.82); }
  }

  @keyframes race-title-in {
    from { opacity: 0; transform: translateX(-17px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes race-nav-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 1100px) {
  body.ir-site .hero-copy { width: min(660px, 70%) !important; }
  body.ir-site .hero-event-brand b { font-size: 62px !important; }
  body.ir-site .run-navigation .main-nav {
    background: #f8fbf8 !important;
    border-bottom: 3px solid #a6cb4a !important;
  }
  body.ir-site .run-navigation .nav-group > button,
  body.ir-site .run-navigation .nav-result { color: #173d37 !important; }
  body.ir-site .run-navigation .nav-group > button:hover,
  body.ir-site .run-navigation .nav-group.open > button,
  body.ir-site .run-navigation .nav-result:hover {
    background: #e8f2e9 !important;
    color: #0b6c73 !important;
  }
  body.ir-site .run-navigation .nav-group > button::before,
  body.ir-site .run-navigation .nav-result::after { display: none !important; }
}

@media (max-width: 900px) {
  body.ir-site .hero-copy { top: 40px !important; }
  .race-track { bottom: 174px; }
  body.ir-site .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.ir-site .hero-facts .countdown-wrap {
    display: flex;
    grid-column: 1 / -1;
    min-height: 76px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(210, 237, 218, .2) !important;
  }
}

@media (max-width: 680px) {
  body.ir-site .site-header.run-navigation { min-height: 70px; }
  body.ir-site main#mainContent > .hero {
    height: min(680px, calc(100svh - 100px)) !important;
    min-height: 570px !important;
  }
  body.ir-site .hero-slide { object-position: 65% center; }
  body.ir-site .hero-image-scrim {
    background: linear-gradient(90deg, rgba(5,35,31,.95), rgba(5,35,31,.74) 67%, rgba(5,35,31,.32)),
      linear-gradient(0deg, rgba(5,35,31,.68), transparent 40%) !important;
  }
  body.ir-site .hero-copy {
    top: 30px !important;
    width: 100% !important;
    padding: 0 20px !important;
  }
  body.ir-site .hero-edition { gap: 6px; margin-bottom: 16px; font-size: 10px; }
  body.ir-site .hero-edition-mark { width: 15px; flex-basis: 15px; }
  body.ir-site .hero h1.hero-event-name { margin-bottom: 12px !important; }
  body.ir-site .hero-event-logo.hero-event-brand { gap: 11px; }
  body.ir-site .hero-event-brand img { width: 47px !important; height: 59px !important; }
  body.ir-site .hero-event-brand b { font-size: 46px !important; line-height: .84 !important; }
  body.ir-site .hero-event-brand small { margin-top: 3px; font-size: 11px !important; }
  body.ir-site .hero .eyebrow.light { max-width: none; margin-bottom: 8px; font-size: 9px !important; }
  body.ir-site .hero .hero-intro { max-width: 340px; margin-bottom: 14px; font-size: 14px; line-height: 1.45 !important; }
  body.ir-site .hero .button { min-height: 43px; font-size: 11px; }
  body.ir-site .hero .availability { margin-top: 10px; font-size: 11px; }
  .race-track { right: 20px; bottom: 171px; left: 20px; gap: 8px; height: 25px; }
  .race-track-start {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 10px;
  }
  .race-track-finish {
    display: grid;
    grid-template-columns: 14px auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 4px;
    font-size: 10px;
  }
  .race-track-start span, .race-track-finish span { font-size: 9px; }
  .race-track-finish span { grid-column: 2; }
  .race-track-finish::before { grid-row: 1 / 3; }
  .race-track-finish::before { width: 14px; height: 14px; background-size: 7px 7px; }
  .race-track-pace { width: 14px; height: 14px; border-width: 4px; }
  body.ir-site .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-height: 156px; }
  body.ir-site .hero-facts > div { min-height: 49px; gap: 3px; padding: 6px 12px; }
  body.ir-site .hero-facts > div::before { display: none; }
  body.ir-site .hero-facts > div > span { font-size: 9px; }
  body.ir-site .hero-facts > div > strong { font-size: 13px !important; }
  body.ir-site .hero-facts .countdown-wrap {
    grid-column: 1 / -1;
    min-height: 58px;
    padding: 6px 12px;
  }
  body.ir-site .hero-facts .countdown { width: min(68%, 240px); gap: 6px; }
  body.ir-site .hero-facts .countdown b strong { font-size: 18px !important; }
  body.ir-site .hero-facts .countdown small { font-size: 8px; }
}

@media (max-width: 360px) {
  body.ir-site .hero-event-brand b { font-size: 41px !important; }
  body.ir-site .hero .eyebrow.light { max-width: 310px; }
  body.ir-site .hero .hero-intro { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .race-track-pace,
  body.ir-site .hero-event-brand b em { animation: none !important; }
  body.ir-site .run-navigation *,
  body.ir-site .run-navigation *::before,
  body.ir-site .run-navigation *::after { animation: none !important; transition: none !important; }
}