*,:after,:before{
  box-sizing:border-box
  }
:root{
  font-size:15px
}

body{
  --color-text:#000;
  --color-text-alt:#606778;
  --color-heading-main:#a2aabd;
  --color-heading-main-alt:#000;
  --color-heading-sub:#606778;
  --color-menu:#000;
  --color-menu-hover:#606778;
  --color-bg:#fff;
  --color-bg-menu:#fff;
  --color-link:#a2aabd;
  --color-link-alt:#000;
  --color-link-hover:#000;
  --color-link-alt-hover:#606778;
  --color-button-menu:#000;
  --color-button-menu-hover:#606778;
  --color-button-close:#000;
  --color-button-close-hover:#606778;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* background-color:var(--color-bg); */
  color:var(--color-text);
  font-family:'Hatton-Light',meno-banner,serif;
  margin:0;
  overflow:hidden
  }

  .background_image {
    position: fixed;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    opacity: 0.9;
  }

.js .loading:after,.js .loading:before{
    content:"";
    position:fixed;
    z-index:1000
    }

.js .loading:before{
      background:var(--color-bg);
      height:100%;
      left:0;
      top:0;
      width:100%}

.js .loading:after{
  animation:loaderAnim .7s linear infinite alternate forwards;
  background:var(--color-link);
  border-radius:50%;
  height:60px;
  left:50%;
  margin:-30px 0 0 -30px;
  opacity:.4;
  top:50%;
  width:60px
}

@keyframes loaderAnim{
  to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link);
    text-decoration:none}
    a,a:hover{outline:none}
    a:hover{color:var(--color-link-hover)}
    a:focus{background:#d3d3d3;outline:none}
    a:focus:not(:focus-visible){background:transparent}
    a:focus-visible{background:transparent;outline:2px solid #fff}

.unbutton{
  background:none;
  border:0;
  cursor:pointer;
  font:inherit;
  margin:0;
  padding:0
}

.unbutton:focus{
  outline:none
  }

.hover-line{
  display:inline-block;
  overflow:hidden;
  position:relative;
  white-space:nowrap
}

.hover-line:before{
  background:currentColor;
  content:"";
  height:1px;
  position:absolute;
  top:92%;
  transform-origin:0 50%;
  transition:transform .3s;
  width:100%
}

.hover-line:hover:before{
  transform:scaleX(0);
  transform-origin:100% 50%
}

main{
  grid-template-columns:100%;
  grid-template-rows:100vh
}

.frame,main{
  display:grid
}

.frame{
  align-content:space-between;
  align-items:center;
  font-size:1rem;
  grid-area:1/1/2/2;
  grid-template-areas:"button heading heading author" "... ... ... ..." "links links links links" "title title title title";
  grid-template-columns:repeat(4,25%);
  grid-template-rows:auto auto 1fr auto;
  height:100vh;
  padding:1rem 1rem .5rem;
  pointer-events:none;
  z-index:100
}

.frame--menu-open{
  --color-link:var(--color-link-alt);
  --color-link-hover:(--color-link-hover-alt);
  --color-heading-main:var(--color-heading-main-alt);
  color:var(--color-text-alt)
}

.frame__title{
  font-size:inherit;
  font-weight:400;
  grid-area:title;
  justify-self:center;
  margin:.5rem 0 0
}

.frame__links{
  align-self:end;
  display:flex;
  flex-wrap:wrap;
  grid-area:links;
  justify-self:center;
}

.frame__links a{
  margin:0 .5rem
}

.frame__button{
  grid-area:button;
  justify-self:start;
}

.frame--menu-open .frame__author{
  opacity:0;
  pointer-events:none
}

.frame__heading{
  display:flex;
  flex-direction:column;
  grid-area:heading;
  justify-self:center;
  margin:0;
  text-align:center;
  white-space:nowrap
}

.frame__heading-main{
  color:var(--color-heading-main);
  display:block;
  font-size:1.5rem;
  line-height:.8
}

.frame__heading-sub{
  color:var(--color-heading-sub);
  font-size:.75rem;
  line-height:1
}

.frame--menu-open .frame__heading-sub{
  opacity:0;
  pointer-events:none
}

.frame a,.frame button{
  pointer-events:auto
}

.button-menu{
  fill:var(--color-button-menu);
  border:1px solid var(--color-button-menu);
  border-radius:50%;
  display:inline-grid;
  height:64px;
  place-items:center;
  width:64px
}

.button-menu svg{
  transition:transform .5s ease
}

.button-menu:focus-visible,.button-menu:hover{
  fill:var(--color-button-menu-hover);
  border-color:var(--color-button-menu-hover)
}

.button-menu:hover svg{
  transform:scale(1.1)
}

.frame--menu-open .button-menu{
  opacity:0;
  pointer-events:none
}

.content{
  align-items:center;
  display:flex;
  flex-direction:column;
  grid-area:1/1/2/2;
  height:100vh;
  justify-content:center;
  position:relative;
  width:100vw
}

.content__title{
  cursor:default;
  font-size:4.5vw;
  font-weight:400;
  line-height:.75;
  margin:10vh 0 0;
  text-align:center
}

.content__title-main{
  font-size:13vw
}

.content__title-main,.content__title-sub{
  display:block;
  /* will-change:opacity,transform */
}

.button-enter{
  cursor:default;
  margin-top:4vh;
  transition:transform .5s ease
}

.button-enter:hover{
  transform:translateX(15px) rotate(-40deg);
}

.menu-wrap{
  background:var(--color-bg-menu);
  display:grid;
  grid-area:1/1/2/2;
  grid-template-columns:100%;
  grid-template-rows:100vh;
  opacity:0;
  pointer-events:none;
  position:relative;
  overflow: hidden;
}

.menu-wrap.menu-wrap--open{
  opacity:1;
  pointer-events:auto
}

.overlay{
  pointer-events:none;
  width:100%;
  z-index:1000
}

.menu,.overlay{
  grid-area:1/1/2/2;
  height:100%;
  position:relative
}

.menu{
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.menu__item{
  color:var(--color-menu);
  cursor:pointer;
  font-size:9vw;
  font-weight:300;
  line-height:1;
  position:relative;
  text-align:right;
  will-change:opacity,transform
}

.menu__item:hover .menu__item-tiny{
  color:var(--color-menu-hover);
}

.menu__item-tiny{
  font-size:1rem
}

.menu__item:nth-child(odd){
  margin-left:-10vw
}

.menu__item-text{
  color:var(--color-menu)
}

.menu__item:hover .menu__item-text{
  color:var(--color-menu-hover)
}

.tiles{
  display:flex;
  flex-direction:column;
  height:100vh;
  justify-content:center;
  opacity:.5;
  position:absolute;
}

.tiles__line-img{
  --tile-margin:3vw;
  background-position:50% 50%;
  background-size:cover;
  flex:none;
  height:100vh;
  width:100vw;
}

.button-close{
  stroke:var(--color-button-close);
  fill:none;
  margin:2rem;
  position:absolute;
  left:0;
  top:0
}

.button-close:focus-visible,.button-close:hover{
  stroke:var(--color-button-close-hover)
}

@media screen and (min-width:53em){
  .frame{
    font-size:1.5rem;
    grid-template-areas:"button heading author" "... ... ..." "title links links";
    grid-template-columns:390px 1fr 390px
  }
  .frame__title{
    align-self:end;
    justify-self:start;
    margin:0 3rem 0 0
  }
  .frame__links{
    display:flex;
    justify-self:end;
    padding:1rem;
  }
  .frame__links a:not(:last-child){
    margin-right:.5rem
  }
  .frame__heading-main{
    font-size:2.15rem
  }
  .frame__heading-sub{
    font-size:1rem
  }
  .menu__item-tiny{
    font-size:2rem
  }
}

@media screen and (max-width:33em){
  .frame__links{
    margin-bottom: 4rem;
  }
  .menu__item {
    font-size: 4em;
  }
}

@media screen and (min-width:43em) and (max-width:53em) {
  .menu__item {
    font-size: 7em;
  }
}