body {
  cursor:none;
  background:#2c2d31;
}
a {
  cursor:none;
}
a:hover {
  cursor:none;
}

.container * {
  color:#faab85;
}

.bg-video {
  position: fixed;
  background:black;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}
.bg-video.inline {
  position:relative;
  height:50vh;
  overflow:hidden;
  margin-bottom:60px;
}
.bg-video.loaded .bg-overlay {
  opacity: .2!important;
}
.bg-video .bg-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  transition:opacity 1.2s ease;
}

.bg-video video.loaded {
  opacity:1;
}
.bg-video video {
  min-width: 100vw;
    min-height: 100vh;
    flex: 1 1 auto;
    object-fit: cover;
    transition: opacity .8s ease;
    z-index: 1;
    position: relative;
}

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.grid.seamless {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
}
.grid .span-1 {
  grid-column: span 1;
}
.grid .span-2 {
  grid-column: span 2;
}
.grid .span-3 {
  grid-column: span 3;
}
.grid .span-4 {
  grid-column: span 4;
}
.grid .span-5 {
  grid-column: span 5;
}
.grid .span-6 {
  grid-column: span 6;
}
.grid .span-8 {
  grid-column: span 8;
}
.grid .span-10 {
  grid-column: span 10;
}
.grid .span-12 {
  grid-column: span 12;
}
.grid > div {
  position:relative;
  z-index:1;
}
.grid > div.ratio-square {
  padding-bottom:100%;
}




/* other commonly-used stuff */
.mobile-only {
  display:none;
}
.bg-cover {
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}
.bg-contain {
  background-size:contain;
  background-position:50% 50%;
  background-repeat:no-repeat;
}
form .post-submit {
  display:none;
}
form .pre-submit {
  display:block;
}
form.after .post-submit {
  display:block;
}
form.after .pre-submit {
  display:none;
}


.section {
  min-height:120vh;
}

.text-center {
  text-align:center;
}
.pad {
  width:100%;
  height:30px;
}
.pad-double {
  width:100%;
  height:60px;
}
.pad-quad {
  width:100%;
  height:120px;
}










.half-slider {
  position:relative;
}
.half-slider .span-4 {
  pointer-events:none;
  color:var(--color-dark-peach);
}
.half-slider .span-4 {
  display:flex;
  justify-content: center;
  align-items: center;
}
.half-slider .span-4 .chonk {
  transform: rotate(-90deg);
  font-size: 12vw;
  transform-origin: center center;
  opacity:0.8;
}
.half-slider .swiper-slide {
  height:auto;
  padding:20px;
}
.half-slider .swiper-slide .inner {
  background-color:#232326;
  border-top-right-radius:3vw;
  border-bottom-right-radius:3vw;
  box-shadow:0px 0px 5px rgba(0,0,0,0.2);
  height:100%;
}
.half-slider .swiper-container {
  width:100%;
  padding-bottom:20px;
}
.half-slider .swiper-scrollbar {
  width: calc(100% - 100px);
  margin-left: 10px;
  bottom:0;
  height:10px;
}
.half-slider .swiper-slide .grid {
  height:100%;
}

.half-slider .swiper-slide .text {
  padding: 40px;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height:100%;
  overflow-y:scroll;
  color:#faab85;
}
.half-slider .swiper-slide .text > * {
  width: 100%;
}





.button {
  margin-bottom:12px;
  display:inline-block;
}



#cursor {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .cursor__circle {
    width: 64px;
    height: 64px;
    margin-top: -50%;
    margin-left: -50%;
    border-radius: 50%;
    border: solid 2px white;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }




  #cursor.overlay .cursor__circle {
    width: 48px;
    height: 48px;
    background-color: rgba(227, 222, 193, 0.08);
    border-color: var(--color-green);
  }
  #cursor.full .cursor__circle {
    /* background-color:rgba(0,0,0,0.1); */
    opacity:0.5;
    height:100px;
    width:100px;
  }

  #cursor.focus .cursor__circle {
    height:18px;
    width:18px;
  }

}




@media screen and (max-width:900px){
  .desktop-only {
    display:none!important;
  }
  .mobile-only {
    display:block!important;
  }
  .mobile-only.flex {
    display:flex!important;
  }

  .grid .span-6 {
    grid-column: span 12;
  }
}




@media screen and (max-width:900px){

  .half-slider .grid .span-8 {
    grid-column: span 12;
    padding-bottom:60px;
  }
  .half-slider .grid .span-4 {
    grid-column: span 12;
    transform: none!important;
  }
  .half-slider .span-4 .chonk {
    transform: none;
    font-size: 31vw;
    margin-bottom: -14vw;
    margin-top: -10vw;
  }
  .half-slider .swiper-slide .inner .grid {
    display:block;
    height:auto;
  }
  .half-slider .swiper-slide {
    height:auto;
  }
  .half-slider .swiper-slide .inner .bg-cover {
    height:50vw;
  }
  .half-slider .swiper-slide .inner {
    border-bottom-left-radius:3vw;
  }
  .half-slider .swiper-scrollbar {
    width:calc(100% - 20px);
    left:0;
  }

  .half-slider .pad-quad {
    display:none;
  }
}