main {
  overflow-x:clip;
}

.hero {
  position:relative;
  min-height:100vh;
  border-right:solid var(--padding) #000;
  overflow-x:clip;

  & .circle {
    position:absolute;
    width:100%;
    aspect-ratio:1;
    border-radius:100%;
    border:1px solid #0008;
    bottom:85%;
  }

  & .black {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:60%;
    z-index:1;
    transition:all 1.5s var(--ease-out) 0.5s;

    @starting-style {
      height:0;
    }
  }

  & .text {
    position:absolute;
    bottom:0;
    left:5vw;
    z-index:3;
    width:50%;

    & h1 {
      font-size:clamp(2rem,18cqw,18cqw);
      margin:0;
    }
  }

  & img {
    position:absolute;
    max-width:unset;
    z-index:2;
  }

  & .nigel {
    right:0;
    top:0;
    height:100vh;
  }

  & .violin {
    right: 15vh;
    height: 36vh;
    top: 18vh;
  } 
}

.black {
  background-color:#000000;
}

.featuring {
  display:grid;
  grid-template-columns: max-content 1fr;
  gap:1.5rem;
  color:#fff;
  margin-block:2rem;

  & h2 {
    font-size:2.4rem;
    margin-left:0.5rem;
  }

  & p {
    font-size:1.6rem;
    margin:0;
    line-height:1.2;
  }
}

.about {
  position:relative;
  padding-top:7.5vw;
  overflow:clip;
  text-align: justify;

  & p {
    animation-delay:0.5s;
  }

  & .circle {
    position:absolute;
    width:100%;
    aspect-ratio:1;
    border-radius:100%;
    border:1px solid #0008;
    bottom:55%;
    right:70%;
    z-index:1;
  }

  & .line1 {
    position:absolute;
    right: calc(var(--padding) * 1.5);
    width: calc(var(--padding) * 1.5);
    height:100%;
    top:0;
    border-left:1px solid #0008;
    border-right:1px solid #0008;
  }

  & .line2 {
    position:absolute;
    width:calc(var(--padding) * 3);
    height:1px;
    bottom:25%;
    right:0;
    border-top:1px solid #0008;
  }

  & .intro {
    display:Grid;
    grid-template-columns: 3fr 6fr;
    gap:3vw;
    align-items:start;
    padding-left:7.5vw;
    margin-bottom:5rem;

    & .right {
      & h2 {
        display:grid;
        grid-template-columns: max-content 1fr;
        color:#000;
        font-size: 24vw;
        margin:0;
        margin-right:-5vw;

        & span {
          font-size:9vw;
          padding-top:0.5vw;
        }
      }

      & h3 {
        font-size:4rem;
        color:#fff;
        margin:0 0 0 6.5vw;
      }

      & p {
        font-size:2rem;
        margin-left:6.5vw;
      }
    }
  }

  & .more {
    display:Grid;
    grid-template-columns: 3fr 3fr;
    gap:5vw;
    align-items:start;
    padding-inline:15vw;
  }

  & .tour {
    position:relative;
    padding-block:5vw;
    display:flex;
    justify-content: center;

    & .black-btn {
      font-size:2.5rem;
      padding:1.25rem 8rem;
      margin:0;
    }

    & .black {
      position:Absolute;
      left:0;
      bottom:0;
      width:var(--padding);
      height:50%;
    }
  }
}

@media screen and (max-width:950px){
  .about .intro {
    grid-template-columns: 1fr;

    & .right {
      order:-1;

      & h2 {
        font-size:38vw;
      }

      & h3,
      & p {
        padding-right:var(--padding_x4);
        line-height:0.8;
        text-align: left;
      }
    }

    & .left {
      padding-right:var(--padding_x4);
    }
  }

  .about .more {
    grid-template-columns: 1fr;
  }

  .featuring {
    text-shadow:0 0 1rem #000;
    gap:0.5rem;
  }
}

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

  .violin {
    display:none;
  }

  .hero {
    border-right:0;

    & .text {
      width:100%;
      left:0;
      padding-inline:var(--padding);

      & h1 {
        font-size:33cqw;
      }
    }

    & .nigel {
      right:unset;
      left:0;
    }
  }

  .about .more {
    padding-left:7.5vw;
  }

  .black::After {
    content:'';
    position:absolute;
    width:var(--padding);
    right:0;
    height:100%;
    bottom:100%;
    background-color:#000;
  }
}

@media screen and (max-width:450px){
  .hero {
    & .nigel {
      left:-50vw;
    }
  }

  .about {

    padding-top:3rem;

    & .line1 {
      right: calc(var(--padding));
      width: calc(var(--padding));
    }

    & .line2 {
      width:var(--padding_x2);
    }

    & .tour {
      padding-inline:7.5vw;
      padding-bottom:3rem;
  
      & .black-btn {
        width:100%;
        padding-inline:2rem;
        text-align: center;
      }
    }

    & .intro {
        & .right {
            & h3 {
            font-size:3rem;
          }
        }
    }
  }

}

@media screen and (max-width:360px){
  .featuring {
    grid-template-columns: 1fr;

    & h2 {
      margin:0;
    }
  }
}