:root {
  --orange: #ff5b14;
  --green: #4d8b2d;
  --lime: #9acb38;
  --cream: #f1dfbd;
  --ink: #0a0c0b;
  --panel: #141715;
  --max: 1320px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ink);
  color: #fff;
  font-family: Inter, Arial, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
.shell {
  width: min(var(--max), calc(100% - 44px));
  margin: auto;
}
.skip {
  position: fixed;
  z-index: 99;
  left: 15px;
  top: 10px;
  background: #fff;
  color: #000;
  padding: 12px;
  transform: translateY(-170%);
}
.skip:focus {
  transform: none;
}
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}
.top {
  height: 34px;
  background: var(--green);
  display: flex;
  align-items: center;
  font: 800 12px Barlow Condensed;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.top .shell {
  display: flex;
  justify-content: space-between;
}
.nav {
  height: 82px;
  position: absolute;
  top: 34px;
  z-index: 5;
  width: 100%;
  border-bottom: 1px solid #ffffff2b;
  background: linear-gradient(#000e, transparent);
}
.nav .shell {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 31px;
}
.logo {
  width: 205px;
  margin-right: auto;
}
.nav a:not(.logo) {
  font: 800 14px Barlow Condensed;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero {
  min-height: 790px;
  height: min(900px, 100vh);
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #061009f7, #061009ba 44%, transparent 82%),
    linear-gradient(0deg, #0a0c0b, transparent 48%, #0008);
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding-bottom: 62px;
  max-width: 700px;
}
.hero-logo {
  width: min(470px, 76vw);
  filter: drop-shadow(9px 12px 0 #000);
  margin: 16px 0;
}
.kicker {
  font: 900 14px Barlow Condensed;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.hero p {
  max-width: 600px;
  font-size: 19px;
  line-height: 1.6;
  color: #ddd;
}
.buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 27px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--orange);
  font: 900 16px Barlow Condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: skew(-7deg);
}
.btn span {
  transform: skew(7deg);
}
.btn.white {
  background: #fff;
  color: #111;
}
.ticker {
  background: var(--lime);
  color: #10140d;
  padding: 16px 0;
}
.ticker .shell {
  display: flex;
  gap: 34px;
  justify-content: center;
  flex-wrap: wrap;
  font: 900 17px Barlow Condensed;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticker b {
  color: #244e16;
}
section {
  padding: 100px 0;
}
.head {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 55px;
  align-items: end;
  margin-bottom: 40px;
}
.head h2 {
  font: 900 clamp(58px, 7vw, 98px)/0.84 Barlow Condensed;
  text-transform: uppercase;
  margin: 10px 0 0;
}
.head p {
  color: #aaa;
  line-height: 1.65;
  margin: 0;
}
.weekend {
  background: #0d100e;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.day {
  min-height: 360px;
  padding: 30px;
  background: var(--panel);
  border: 1px solid #35402f;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.day:before {
  content: attr(data-day);
  position: absolute;
  right: -4px;
  top: -42px;
  font: 900 160px Barlow Condensed;
  color: #ffffff08;
}
.day .date {
  color: var(--lime);
  font: 900 15px Barlow Condensed;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.day h3 {
  font: 900 48px/0.9 Barlow Condensed;
  text-transform: uppercase;
  margin: auto 0 20px;
}
.day .time {
  font: 900 24px Barlow Condensed;
  color: #fff;
  margin: 8px 0;
}
.day p {
  color: #aab0aa;
  line-height: 1.55;
  margin: 0;
}
.day.race {
  background: linear-gradient(150deg, #273b1d, #111 70%);
  border-color: var(--lime);
}
.format {
  margin-top: 16px;
  background: var(--orange);
  padding: 18px 22px;
  font: 900 18px Barlow Condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.finder {
  background: var(--cream);
  color: #17130d;
}
.finder .head p {
  color: #655d50;
}
.finder-panel {
  background: #0e100f;
  color: #fff;
  border: 1px solid #3d4637;
  box-shadow: 14px 14px 0 #8ba94d;
}
.age-banner {
  margin: 0;
  padding: 18px 24px;
  background: #211d14;
  border-left: 5px solid var(--lime);
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  transition: 0.2s ease;
}
.age-banner strong {
  color: var(--lime);
}
.age-banner.age-alert {
  background: var(--lime);
  color: #111;
  border-left-color: var(--orange);
  box-shadow: inset 0 0 0 2px var(--orange);
}
.age-banner.age-alert strong {
  color: #7a1d00;
}
.controls {
  display: grid;
  grid-template-columns: 1.2fr 0.65fr 0.75fr 0.75fr;
  gap: 1px;
  background: #33402d;
}
.control {
  padding: 22px;
  background: #181b19;
}
.control label {
  display: block;
  color: var(--lime);
  font: 900 12px Barlow Condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 9px;
}
.control input,
.control select {
  width: 100%;
  height: 52px;
  background: #070807;
  border: 1px solid #596255;
  color: #fff;
  padding: 0 14px;
  font: 700 15px Inter;
}
.results {
  padding: 28px;
}
.result-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}
.result-bar strong {
  font: 900 28px Barlow Condensed;
  text-transform: uppercase;
}
.result-bar span {
  color: #999;
  font-size: 12px;
}
.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}
.class-card {
  background: #131513;
  border: 1px solid #3b4138;
  padding: 21px;
  min-height: 185px;
  display: flex;
  flex-direction: column;
}
.class-card:hover {
  border-color: var(--lime);
}
.class-number {
  color: var(--orange);
  font: 900 13px Barlow Condensed;
  letter-spacing: 0.1em;
}
.class-card h3 {
  font: 900 27px/0.96 Barlow Condensed;
  text-transform: uppercase;
  margin: 10px 0;
}
.class-card p {
  color: #aaa;
  font-size: 12px;
  line-height: 1.55;
  margin: auto 0 0;
}
.tags {
  display: flex;
  gap: 6px;
  margin-top: 13px;
}
.tags span {
  border: 1px solid #596255;
  padding: 5px 7px;
  font: 800 10px Barlow Condensed;
  text-transform: uppercase;
}
.official {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  margin-top: 23px;
  color: #aaa;
  font-size: 12px;
}
.official a {
  color: #fff;
  font: 900 14px Barlow Condensed;
  text-transform: uppercase;
}
.fees {
  background: var(--green);
  padding: 72px 0;
}
.fee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.fee {
  background: #fff;
  color: #121510;
  padding: 29px;
  border-bottom: 8px solid var(--orange);
}
.fee small {
  font: 900 13px Barlow Condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.fee strong {
  display: block;
  font: 900 54px Barlow Condensed;
  margin: 9px 0;
}
.fee span {
  color: #59604f;
}
.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #35402f;
}
.entry-copy {
  padding: 55px;
  background: linear-gradient(145deg, #263d1b, #111 67%);
}
.entry-copy h2,
.rules h2 {
  font: 900 68px/0.84 Barlow Condensed;
  text-transform: uppercase;
  margin: 10px 0 23px;
}
.entry-copy p {
  color: #aaa;
  line-height: 1.65;
}
.entry-actions {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 55px;
}
.action {
  border: 1px solid #495245;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 900 17px Barlow Condensed;
  text-transform: uppercase;
}
.action small {
  display: block;
  color: #888;
  font: 500 12px Inter;
  text-transform: none;
  margin-top: 6px;
}
.action b {
  color: var(--lime);
  font-size: 24px;
}
.minor {
  background: var(--orange);
  padding: 68px 0;
}
.minor-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 55px;
}
.minor h2 {
  font: 900 58px/0.84 Barlow Condensed;
  text-transform: uppercase;
  margin: 0;
}
.minor p {
  line-height: 1.7;
  margin: 0;
}
.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.rules img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.rule {
  background: #171a18;
  border-left: 4px solid var(--lime);
  padding: 17px 19px;
  color: #bbb;
  margin: 10px 0;
}
.rule strong {
  color: #fff;
}
@media (max-width: 900px) {
  .nav a:not(.logo) {
    display: none;
  }
  .head,
  .entry-grid,
  .minor-grid,
  .rules-grid {
    grid-template-columns: 1fr;
  }
  .timeline,
  .controls,
  .class-grid,
  .fee-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .shell {
    width: calc(100% - 28px);
  }
  .top span:last-child {
    display: none;
  }
  .hero {
    min-height: 690px;
    height: 88vh;
  }
  .hero-logo {
    width: 88vw;
  }
  .timeline,
  .controls,
  .class-grid,
  .fee-grid {
    grid-template-columns: 1fr;
  }
  .day {
    min-height: 280px;
  }
  .result-bar,
  .official {
    display: block;
  }
  .official a {
    display: inline-block;
    margin-top: 16px;
  }
  .entry-copy,
  .entry-actions {
    padding: 36px 24px;
  }
  section {
    padding: 74px 0;
  }
  .head h2 {
    font-size: 56px;
  }
}

.az-open-warmup {
  padding: 0;
  background: #101310;
  border-top: 1px solid #2d352b;
  border-bottom: 1px solid #2d352b;
  overflow: hidden;
}
.az-open-warmup-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: stretch;
}
.az-open-warmup-photo {
  min-height: 650px;
  position: relative;
}
.az-open-warmup-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 65%, #101310);
}
.az-open-warmup-photo img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 52% center;
}
.az-open-warmup-copy {
  padding: 82px 0 82px 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.az-open-warmup-copy h2 {
  font: 900 clamp(62px, 6.5vw, 104px)/0.82 Barlow Condensed;
  text-transform: uppercase;
  margin: 14px 0 25px;
}
.az-open-warmup-copy p {
  max-width: 590px;
  color: #c4c9c3;
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
}
.warmup-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0;
}
.warmup-points span {
  border: 1px solid #55624f;
  color: #fff;
  padding: 9px 12px;
  font: 900 12px Barlow Condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.warmup-az-logo {
  width: 210px;
  max-height: 165px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 24px;
}
.fees-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: end;
  margin-bottom: 34px;
}
.fees-heading .kicker {
  color: #d8ff8c;
}
.fees-heading h2 {
  font: 900 clamp(52px, 6vw, 82px)/0.84 Barlow Condensed;
  text-transform: uppercase;
  margin: 10px 0 0;
}
.fees-heading p {
  color: #eef5e8;
  line-height: 1.65;
  margin: 0;
  max-width: 530px;
}
.fees + .finder {
  border-top: 10px solid var(--orange);
}

@media (max-width: 900px) {
  .az-open-warmup-grid {
    grid-template-columns: 1fr;
  }
  .az-open-warmup-photo {
    min-height: 470px;
  }
  .az-open-warmup-photo:after {
    background: linear-gradient(0deg, #101310, transparent 50%);
  }
  .az-open-warmup-copy {
    padding: 58px 0 72px;
  }
  .fees-heading {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 580px) {
  .az-open-warmup-photo {
    min-height: 360px;
  }
  .az-open-warmup-copy h2 {
    font-size: 58px;
  }
  .az-open-warmup-copy p {
    font-size: 16px;
  }
  .warmup-az-logo {
    width: 175px;
  }
  .fees-heading h2 {
    font-size: 54px;
  }
}

/* Keep the pricing heading above the four cards. */
.fees .fees-heading {
  grid-column: 1/-1;
  width: 100%;
}

.fence-parking {
  background: #0d100e;
  border-top: 1px solid #2d352b;
  border-bottom: 1px solid #2d352b;
}
.fence-parking-head {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 55px;
  align-items: end;
  margin-bottom: 40px;
}
.fence-parking-head h2 {
  font: 900 clamp(58px, 7vw, 96px)/0.84 Barlow Condensed;
  text-transform: uppercase;
  margin: 10px 0 0;
  max-width: 820px;
}
.fence-parking-head p {
  color: #aeb4ad;
  line-height: 1.65;
  margin: 0;
  max-width: 560px;
}
.fence-parking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.55fr);
  border: 1px solid #394334;
  box-shadow: 14px 14px 0 #26391d;
}
.fence-map {
  position: relative;
  background: #f4f0e7;
  min-height: 620px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fence-map img {
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: contain;
}
.map-expand {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: #0a0c0be8;
  border-left: 5px solid var(--orange);
  padding: 15px 18px;
  font: 900 13px Barlow Condensed;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.fence-card {
  position: relative;
  overflow: hidden;
  padding: 54px 42px;
  background: linear-gradient(145deg, #29421d, #101310 68%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.fence-number {
  position: absolute;
  right: -4px;
  top: -52px;
  color: #ffffff08;
  font: 900 230px Barlow Condensed;
}
.fence-card h3 {
  position: relative;
  font: 900 clamp(42px, 4.6vw, 68px)/0.86 Barlow Condensed;
  text-transform: uppercase;
  margin: 14px 0 22px;
}
.fence-card p {
  position: relative;
  color: #c1c8bf;
  line-height: 1.65;
  margin: 0 0 24px;
}
.fence-card .btn {
  position: relative;
  width: 100%;
  padding: 0 18px;
}
.fence-card small {
  position: relative;
  color: #899087;
  line-height: 1.55;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .fence-parking-head,
  .fence-parking-grid {
    grid-template-columns: 1fr;
  }
  .fence-map {
    min-height: 0;
    aspect-ratio: 5/6;
  }
  .fence-card {
    padding: 48px 32px;
  }
  .fence-card .btn {
    width: auto;
  }
}
@media (max-width: 580px) {
  .fence-parking-head {
    gap: 22px;
  }
  .fence-parking-head h2 {
    font-size: 54px;
  }
  .fence-map {
    padding: 12px;
    aspect-ratio: auto;
  }
  .fence-map img {
    height: auto;
  }
  .map-expand {
    position: static;
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }
  .fence-map {
    display: block;
  }
  .fence-card {
    padding: 42px 22px;
  }
  .fence-card .btn {
    width: 100%;
    font-size: 14px;
  }
}