:root {
  --gold: #ffbf66;
  --green: #22401e;
  --green-faint: color-mix(in srgb, var(--green) 18%, transparent);
  --white: #fff;
}

@font-face {
  font-family: "PP Hatton";
  src: url("https://d2wxw6ajr7vm3r.cloudfront.net/6056b39245e8dcaad45b655dcc07eae5.woff2") format("woff2"),
        url("https://d2wxw6ajr7vm3r.cloudfront.net/c2ae5789cfeb3b05247adf7975d48948.woff") format("woff");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "PP Hatton";
  src: url("https://d2wxw6ajr7vm3r.cloudfront.net/02f63e048b42926a968cb9b5edb7ad72.woff2") format("woff2"),
        url("https://d2wxw6ajr7vm3r.cloudfront.net/aa8aebaeb22d6f36153d3835b9d994a0.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "PP Hatton";
  src: url("https://d2wxw6ajr7vm3r.cloudfront.net/4a29e068dba1e84f9c9f9a7669ef7a69.woff2") format("woff2"),
        url("https://d2wxw6ajr7vm3r.cloudfront.net/ef7a1cbf6f32225315db24f66d7969bd.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "PP Monument Narrow";
  src: url("https://d2wxw6ajr7vm3r.cloudfront.net/4f733faae56e2b23d8f30c70ac163948.woff2") format("woff2"),
        url("https://d2wxw6ajr7vm3r.cloudfront.net/50ee4dc87ea163f3cc3477f19b798a1c.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "PP Monument Wide";
  src: url("https://d2wxw6ajr7vm3r.cloudfront.net/fb1160b323909a6c19544d37470a2f14.woff2") format("woff2"),
        url("https://d2wxw6ajr7vm3r.cloudfront.net/73a3d7577e8a200881991f1ab16afd2c.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "PP Monument Wide";
  src: url("https://d2wxw6ajr7vm3r.cloudfront.net/a5d18b7e03cb71e6da5cb8ae5d331031.woff2") format("woff2"),
        url("https://d2wxw6ajr7vm3r.cloudfront.net/c73922ad2ba8e34ba90a26da728c9c98.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

header {
  align-items: center;
  background: var(--gold);
  display: flex;
  justify-content: center;
  padding: 2rem 0 0.25rem;
  padding: 2rem 1rem 0.25rem;
  position: sticky;
  top: 0;
  transition: padding 0.4s ease;
  z-index: 100;

  @media only screen and (width >= 768px) {
    margin-bottom: 2rem;
  }

  @media only screen and (width < 1090px) {
    justify-content: space-between;
  }

  &.scrolled {
    justify-content: space-between;
    padding: 1rem;

    @media only screen and (width >= 768px) {
      padding: 1rem 2rem;
    }
  }

  /* The drop shadow and nav are what make the compact bar read as "solid"
     and complete — `chrome-visible` is added by JS (via a plain timeout)
     only once the heading's own 0.4s shrink has finished, so neither
     appears layered on top of text still resizing. It's a separate class
     from `.scrolled` (which drives layout/padding and the JS FLIP)
     specifically because `display: none` on `.header-nav` can't be eased by
     a CSS transition-delay — toggling display and opacity in the same frame
     just snaps, so the reveal has to be gated in JS instead. */
  &.chrome-visible {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.75);
    transition: box-shadow 0.25s ease;
  }

  & .nav-toggle {
    display: none;
  }

  & .hamburger {
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    z-index: 101;

    @media only screen and (width < 1090px) {
      display: flex;
    }

    & span {
      background: var(--green);
      border-radius: 2px;
      display: block;
      height: 3px;
      transition: transform 0.3s ease, opacity 0.3s ease;
      width: 28px;
    }
  }

  & .nav-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  & .nav-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }

  & .nav-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  &:not(.chrome-visible) {
    & .header-nav {
      display: none;
    }
  }

  & .header-nav {
    align-items: center;
    display: none;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;

    @media only screen and (width >= 1090px) {
      display: flex;
    }

    @media only screen and (width < 1090px) {
      background: var(--gold);
      box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
      flex-direction: column;
      gap: 1.5rem;
      left: 0;
      padding: 2rem 1rem;
      position: absolute;
      top: 100%;
      width: 100%;
    }

    & div {
      display: flex;
    }

    & a {
      border: 2px solid transparent;
      color: var(--green);
      font-family: "PP Monument Wide", sans-serif;
      font-size: 1.25rem;
      padding: 1rem;
      position: relative;
      text-decoration: none;

      @media only screen and (width >= 1090px) {
        font-size: 1rem;
      }

      @media only screen and (width >= 1200px) {
        font-size: 1.25rem;
      }

      &.btn {
        color: #ffbe66;
        pointer-events: none;
        transition: opacity 0.4s ease;
        width: auto;

        &:hover,
        &:active,
        &:focus {
          border-bottom-color: var(--green);
        }

        @media only screen and (width >= 1090px) {
          opacity: 0;
          margin-right: 1rem;
        }
      }

      &:not(.nav-icon, .btn):hover {
        border-bottom-color: var(--green);
      }

      & img {
        width: 2rem;
      }
    }
  }

  & .nav-toggle:checked ~ .header-nav {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  &.chrome-visible .header-nav {
    opacity: 1;
    pointer-events: auto;
  }

  &.nav-btn-visible .header-nav a.btn {
    opacity: 1;
    pointer-events: auto;
  }
}

h1 {
  color: var(--green);
  font-family: "PP Hatton";
  font-size: clamp(2rem, 9vw, 10rem);
  font-weight: 700;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  transition: font-size 0.4s ease, transform 0.4s ease;

  & small {
    display: block;
    font-size: 2rem;
    font-weight: 100;
    letter-spacing: 3px;
    margin-top: 0.5rem;
    transition: font-size 0.4s ease, font-weight 0.4s ease, letter-spacing 0.4s ease;
  }

  /* Below 1090px the hamburger is always shown (not just once scrolled), so
     the compact/left-aligned heading needs to match it unconditionally down
     there. Above 1090px it still only compacts once .scrolled is applied. */
  @media only screen and (width < 1090px) {
    font-size: 1.25rem;
    text-align: left;
/*
    @media only screen and (width >= 768px) {
      font-size: 1.25rem;
    }*/

    & small {
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 3px;

      /*@media only screen and (width >= 768px) {
        letter-spacing: 3px;
      }*/
    }
  }

  header.scrolled & {
    @media only screen and (width >= 1090px) {
      font-size: 1.25rem;
      text-align: left;

      @media only screen and (width >= 1330px) {
        font-size: 2rem;
      }

      & small {
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 3px;
      }
    }
  }

  & a {
    color: var(--green);
    text-decoration: none;
  }
}

.flex-container > footer {
  background-color: var(--gold);
  font-family: "PP Monument Wide", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: auto;
  padding: 1rem 0;
  text-align: center;
  
  & a {
    color: #000;
  }
  
  & p {
    margin-top: 0.5rem;
  }
}

.skyline {
  bottom: 108px;
  height: 50dvh;
  left: -700%;
  max-width: none;
  opacity: 0.5;
  position: fixed;
  width: auto;
  z-index: -1;

  @media only screen and (width >= 768px) {
    height: auto;
    left: 0;
    max-height: none;
    opacity: 1;
    width: 100%;
  }
}

.main-content {
  margin-top: 40px;
}

#live-summary footer {
  position: relative;
  
  
}

div.chronography-banner {
  background: #dffae8;
  border: 1px solid #b1ddbf;
  border-radius: 0.25rem;
  margin-top: 0;
  padding: 1rem;
  text-align: center;
}

.chronography-section {
  & h2 {
    text-align: center;
  }
}

.checkout-form {
  & .checkbox {
    & label {
      font-size: 0.75rem;
      
      &:not(.custom-field-description) {
        font-size: 0.875rem;
        font-weight: bold;
        line-height: 1.2;
      }
      
      & p a:not(.btn) {
        color: var(--green);
      }
    }
  }
}

.order-confirmation {
  & .ticket {
    & form {
      & .checkbox {
        & label {
          font-size: 0.75rem;
          
          &:not(.custom-field-description) {
            font-size: 0.875rem;
            font-weight: bold;
            line-height: 1.2;
          }
          
          & p a:not(.btn) {
            color: var(--green);
          }
        }
      }
    }
  }
}

.main-content {
  & article {
    & a.ticket-link {
      &:hover, &:focus, &:active {
        text-decoration: none;
      }
    }
  }
}