* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
:root {
  --body-pad: 1.875rem;
  --z1: 5;
  --z2: 4;
  --z3: 3;
  --z4: 2;
  --z5: 1;
  --zbase: 0;
}
@font-face {
  font-family: 'FuturaRennerRegular';
  src: url('../fonts/FuturaRennerRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html,
body {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  letter-spacing: .08em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
h3 {
  font-family: 'FuturaRennerRegular', sans-serif;
  color: #E92C1D;
  font-size: 1.25rem;
  letter-spacing: .35em;
  line-height: 1.1875;
  text-transform: uppercase;
  font-weight: 100;
}
h5 {
  font-size: .9375rem;
  line-height: 1.4;
  letter-spacing: .1em;
}
h6 {
  font-size: .78125rem;
  font-style: italic;
}
h6,p {
  font-weight: 100;
}
p {
  font-size: .8rem;
  line-height: 1.6;
  letter-spacing: .04em;
}
.text_block p:not(:last-child) {
  margin-bottom: .8em;
}
.text_block h1.head,
.text_block h2.head,
.text_block h3.head,
.text_block h4.head,
.text_block p.head,
.text_block div.head {
  margin-bottom: 2.4rem;
}
.text_block h1.subhead,
.text_block h2.subhead,
.text_block h3.subhead,
.text_block h4.subhead,
.text_block p.subhead,
.text_block div.subhead {
  margin-bottom: 1rem;
}
.text_block .head *:not(:last-child),
.text_block .subhead *:not(:last-child) {
  margin-bottom: .375rem;
}
.text_block .text_block:not(:last-of-type) {
  margin-bottom: 3rem;
}
#enter_button {
  cursor: pointer;
  width: 100%;
  height: 2.4rem;
  display: grid;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  background-color: white;
}
#enter_text {
  font-family: 'FuturaRennerRegular', sans-serif;
  font-size: 1.3rem;
  color: #010108;
}
.modal_close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.modal_close .icon {
  width: .925rem;
  height: 1.45rem;
  margin-right: .45rem;
}
.modal_close .icon .icon_fill {
  fill: white;
}
.modal_close .text {
  -webkit-transform: translate3d(0, 0.07em, 0);
          transform: translate3d(0, 0.07em, 0);
}
#landing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #010108;
  padding: var(--body-pad);
  -webkit-transition: 2000ms ease-out;
  transition: 2000ms ease-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: var(--z5);
}
#landing .container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: 'graphic' 'desc';
  grid-template-rows: 34fr 21fr;
}
#landing[data-state="0"] {
  opacity: 0;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
#landing_graphic,
#landing_desc {
  height: 100%;
}
#landing_graphic {
  --landinganim: 1750ms;
  grid-area: graphic;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#landing_graphic img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
#landing_graphic img#logo {
  z-index: var(--z1);
}
#landing_graphic img#logobg {
  z-index: var(--zbase);
  -webkit-filter: blur(6px);
          filter: blur(6px);
  -webkit-animation: logobg var(--landinganim) ease-in-out infinite;
          animation: logobg var(--landinganim) ease-in-out infinite;
}
#landing_graphic #logooverlay {
  position: relative;
  width: 10rem;
  height: 10rem;
  z-index: var(--z5);
  -webkit-transform: translate3d(0, -0.4em, 0);
          transform: translate3d(0, -0.4em, 0);
  display: block;
  opacity: .5;
}
#landing_graphic #logooverlay .diam {
  height: 100%;
  width: 1px;
  position: absolute;
  -webkit-transform-origin: center;
          transform-origin: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  top: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
}
#landing_graphic #logooverlay .diam .line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  width: 100%;
}
#landing_graphic #logooverlay .diam .line.l1 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
#landing_graphic #logooverlay .diam .line.l2 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#landing_graphic #logooverlay .diam .line:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
}
#landing_graphic #logooverlay .diam .line.l1:before {
  -webkit-animation: linetoggle1 var(--landinganim) ease-in-out infinite;
          animation: linetoggle1 var(--landinganim) ease-in-out infinite;
}
#landing_graphic #logooverlay .diam .line.l2:before {
  -webkit-animation: linetoggle2 var(--landinganim) ease-in-out infinite;
          animation: linetoggle2 var(--landinganim) ease-in-out infinite;
}
#landing_graphic #logooverlay .diam.d2 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(15deg);
          transform: translate3d(-50%, 0, 0) rotateZ(15deg);
}
#landing_graphic #logooverlay .diam.d3 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(30deg);
          transform: translate3d(-50%, 0, 0) rotateZ(30deg);
}
#landing_graphic #logooverlay .diam.d4 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(45deg);
          transform: translate3d(-50%, 0, 0) rotateZ(45deg);
}
#landing_graphic #logooverlay .diam.d5 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(60deg);
          transform: translate3d(-50%, 0, 0) rotateZ(60deg);
}
#landing_graphic #logooverlay .diam.d6 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(75deg);
          transform: translate3d(-50%, 0, 0) rotateZ(75deg);
}
#landing_graphic #logooverlay .diam.d7 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(90deg);
          transform: translate3d(-50%, 0, 0) rotateZ(90deg);
}
#landing_graphic #logooverlay .diam.d8 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(105deg);
          transform: translate3d(-50%, 0, 0) rotateZ(105deg);
}
#landing_graphic #logooverlay .diam.d9 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(120deg);
          transform: translate3d(-50%, 0, 0) rotateZ(120deg);
}
#landing_graphic #logooverlay .diam.d10 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(135deg);
          transform: translate3d(-50%, 0, 0) rotateZ(135deg);
}
#landing_graphic #logooverlay .diam.d11 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(150deg);
          transform: translate3d(-50%, 0, 0) rotateZ(150deg);
}
#landing_graphic #logooverlay .diam.d12 {
  -webkit-transform: translate3d(-50%, 0, 0) rotateZ(165deg);
          transform: translate3d(-50%, 0, 0) rotateZ(165deg);
}
#landing_desc {
  grid-area: desc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative;
  z-index: var(--z5);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
#modal {
  background-color: #130724;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: var(--z1);
  padding: var(--body-pad);
  padding-top: calc(4 * var(--body-pad));
  overflow: hidden;
  display: none;
  -webkit-transition: 500ms ease-out;
  transition: 500ms ease-out;
}
#modal[data-state="1"] {
  display: block;
}
.modal_close {
  position: fixed;
  top: var(--body-pad);
  left: var(--body-pad);
  cursor: pointer;
  -webkit-transform: translate3d(-0.125rem, 0, 0);
          transform: translate3d(-0.125rem, 0, 0);
}
.modal_container {
  width: 100%;
  height: calc(100% - (2 * var(--body-pad)));
  overflow: hidden;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.symbol_link {
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 3.5rem;
  height: 3.5rem;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out;
  transition: opacity 1000ms ease-out;
  -webkit-transition-delay: 1500ms;
          transition-delay: 1500ms;
  z-index: var(--zbase);
}
.symbol_link:before {
  display: block;
  content: '';
  width: 4rem;
  height: 4rem;
  background-color: #130724;
  -webkit-transform: translate3d(-0.25rem, -0.25rem, 0);
          transform: translate3d(-0.25rem, -0.25rem, 0);
  border-radius: 50%;
  position: relative;
  opacity: .7;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  z-index: -1;
}
.symbol_link:after {
  left: 0;
  top: 0;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  color: transparent;
  width: 3.5rem;
  height: 3.5rem;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-transition: 1000ms ease-out;
  transition: 1000ms ease-out;
  -webkit-transition-delay: 1750ms;
          transition-delay: 1750ms;
  z-index: 1;
}
.symbol_link.m {
  -webkit-transform: translate3d(50%, -50%, 0);
          transform: translate3d(50%, -50%, 0);
}
.symbol_link[data-artist="admira"],
.symbol_link[data-artist="cyma"] {
  top: 11.5%;
}
.symbol_link[data-artist="admira"] {
  left: 19%;
}
.symbol_link[data-artist="admira"]:after {
  content: 'Admira_Nuradzhani';
  background-image: url('../assets/symbols/admira.svg');
}
.symbol_link[data-artist="cyma"] {
  right: 19%;
}
.symbol_link[data-artist="cyma"]:after {
  content: 'Cyma Hibri';
  background-image: url('../assets/symbols/cyma.svg');
}
.symbol_link[data-artist="duncan2"],
.symbol_link[data-artist="elektra2"] {
  top: 21%;
}
.symbol_link[data-artist="duncan2"] {
  left: 34%;
}
.symbol_link[data-artist="duncan2"]:after {
  content: 'Duncan Maclean';
  background-image: url('../assets/symbols/duncan_window.svg');
}
.symbol_link[data-artist="elektra2"] {
  right: 34%;
}
.symbol_link[data-artist="elektra2"]:after {
  content: 'Elektra Jiang & Iain Nash';
  background-image: url('../assets/symbols/elektra_antepyrosis.svg');
}
.symbol_link[data-artist="alireza"],
.symbol_link[data-artist="anji"] {
  top: 29%;
}
.symbol_link[data-artist="alireza"] {
  left: 16.8%;
}
.symbol_link[data-artist="alireza"]:after {
  content: 'Alireza Mirzaeisabet';
  background-image: url('../assets/symbols/alireza.svg');
}
.symbol_link[data-artist="anji"] {
  right: 16.8%;
}
.symbol_link[data-artist="anji"]:after {
  content: 'Anji Brice';
  background-image: url('../assets/symbols/anji.svg');
}
.symbol_link[data-artist="jess"],
.symbol_link[data-artist="gwen"] {
  top: 39.4%;
}
.symbol_link[data-artist="jess"] {
  left: 32.8%;
}
.symbol_link[data-artist="jess"]:after {
  content: 'OneJessa';
  background-image: url('../assets/symbols/jess.svg');
}
.symbol_link[data-artist="gwen"] {
  right: 32.8%;
}
.symbol_link[data-artist="gwen"]:after {
  content: 'Gwen Taualai';
  background-image: url('../assets/symbols/gwen.svg');
}
.symbol_link[data-artist="elektra1"],
.symbol_link[data-artist="gakk"] {
  top: 47.7%;
}
.symbol_link[data-artist="elektra1"] {
  left: 11.8%;
}
.symbol_link[data-artist="elektra1"]:after {
  content: 'Elektra Jiang & Iain Nash';
  background-image: url('../assets/symbols/elektra_contrascientia.svg');
}
.symbol_link[data-artist="gakk"] {
  right: 11.8%;
}
.symbol_link[data-artist="gakk"]:after {
  content: 'Gakk Manson';
  background-image: url('../assets/symbols/gakk.svg');
}
.symbol_link[data-artist="harry"],
.symbol_link[data-artist="duncan1"] {
  top: 58.45%;
}
.symbol_link[data-artist="harry"] {
  left: 19%;
}
.symbol_link[data-artist="harry"]:after {
  content: 'Harry Hock & Aldous Scales';
  background-image: url('../assets/symbols/harry.svg');
}
.symbol_link[data-artist="duncan1"] {
  right: 19%;
}
.symbol_link[data-artist="duncan1"]:after {
  content: 'Duncan Maclean';
  background-image: url('../assets/symbols/duncan_hammer.svg');
}
.symbol_link[data-artist="meng2"] {
  left: 50%;
  top: 63%;
}
.symbol_link[data-artist="meng2"]:after {
  content: 'Meng-Yu Yan';
  background-image: url('../assets/symbols/meng_beneath.svg');
}
.symbol_link[data-artist="brooke1"],
.symbol_link[data-artist="zac"] {
  top: 72.3%;
}
.symbol_link[data-artist="brooke1"] {
  left: 17.6%;
}
.symbol_link[data-artist="brooke1"]:after {
  content: 'Brooke Ellen Louttit';
  background-image: url('../assets/symbols/brooke_strain.svg');
}
.symbol_link[data-artist="zac"] {
  right: 17.6%;
}
.symbol_link[data-artist="zac"]:after {
  content: 'Zac Ruokari';
  background-image: url('../assets/symbols/zac.svg');
}
.symbol_link[data-artist="ben"] {
  left: 50%;
  top: 81%;
}
.symbol_link[data-artist="ben"]:after {
  content: 'Ben Lang';
  background-image: url('../assets/symbols/ben.svg');
}
.symbol_link[data-artist="meng1"],
.symbol_link[data-artist="brooke2"] {
  top: 90%;
}
.symbol_link[data-artist="meng1"] {
  left: 28%;
}
.symbol_link[data-artist="meng1"]:after {
  content: 'Meng-Yu Yan';
  background-image: url('../assets/symbols/meng_scrying.svg');
}
.symbol_link[data-artist="brooke2"] {
  right: 28%;
}
.symbol_link[data-artist="brooke2"]:after {
  content: 'Brooke Ellen Louttit';
  background-image: url('../assets/symbols/brooke_portrait.svg');
}
main[data-state="1"] .symbol_link {
  opacity: 1;
}
main[data-state="1"] .symbol_link:after {
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
body {
  background-color: #010108;
  position: relative;
}
body.noscroll {
  position: fixed;
  overflow-y: scroll;
}
body.modalnoscroll,body > .container {
  position: fixed;
  overflow: hidden;
}
body > .container {
  overflow-y: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main {
  position: relative;
  z-index: var(--z1);
  width: 100%;
  height: var(--pageh);
  -webkit-transition: opacity 1000ms ease-out;
  transition: opacity 1000ms ease-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
main[data-state="0"] {
  opacity: 0;
}
#heptagram {
  position: absolute;
  -webkit-animation: heptagram 3000ms linear infinite;
          animation: heptagram 3000ms linear infinite;
}
#heptagram .container {
  height: var(--pageh);
}
#heptagram svg {
  width: auto !important;
  opacity: .15;
  -webkit-transform: translate3d(var(--bgoffset), 0, 0);
          transform: translate3d(var(--bgoffset), 0, 0);
}
#heptagram svg path {
  fill: transparent;
}
#hep_logo {
  -webkit-transform: translate3d(-50%, -22%, 0);
          transform: translate3d(-50%, -22%, 0);
  width: 8rem;
  height: 4.5rem;
  background-image: url('../assets/graphics/logo_red.svg');
  background-size: contain;
}
#hep_logo,#hep_logoarray {
  position: absolute;
  top: calc(var(--pageh) / 2);
  left: 50%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: 2000ms ease;
  transition: 2000ms ease;
  -webkit-transition-delay: 1500ms;
          transition-delay: 1500ms;
}
#hep_logoarray {
  -webkit-transform: translate3d(-50%, -44%, 0);
          transform: translate3d(-50%, -44%, 0);
  width: 100%;
  height: 21rem;
  background-image: url('../assets/graphics/logo_array.svg');
  background-size: cover;
}
main[data-state="1"] #hep_logo {
  opacity: 1;
}
@-webkit-keyframes logobg {
  0%,
  100% {
    width: 110%;
    opacity: .8;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
}
@keyframes logobg {
  0%,
  100% {
    width: 110%;
    opacity: .8;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
}
@-webkit-keyframes linetoggle1 {
  0%,
  20% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  40% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  60%,
  90%,
  100% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  0%,
  90%,
  100% {
    opacity: 0;
  }
  39% {
    opacity: .4;
  }
  40% {
    opacity: 1;
  }
}
@keyframes linetoggle1 {
  0%,
  20% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  40% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  60%,
  90%,
  100% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  0%,
  90%,
  100% {
    opacity: 0;
  }
  39% {
    opacity: .4;
  }
  40% {
    opacity: 1;
  }
}
@-webkit-keyframes linetoggle2 {
  0%,
  20% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  40% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  60%,
  90%,
  100% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  0%,
  90%,
  100% {
    opacity: 0;
  }
  39% {
    opacity: .4;
  }
  40% {
    opacity: 1;
  }
}
@keyframes linetoggle2 {
  0%,
  20% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  40% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  60%,
  90%,
  100% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  0%,
  90%,
  100% {
    opacity: 0;
  }
  39% {
    opacity: .4;
  }
  40% {
    opacity: 1;
  }
}
@-webkit-keyframes heptagram {
  0%,
  100% {
    opacity: .35;
  }
  50% {
    opacity: 1;
  }
}
@keyframes heptagram {
  0%,
  100% {
    opacity: .35;
  }
  50% {
    opacity: 1;
  }
}