*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --black:#080808;
  --offwhite:#f2efe9;
  --grey:#a6a6a6;
  --line:rgba(255,255,255,.18);
}

html,body{
  min-height:100%;
}

body{
  background:var(--black);
  color:var(--offwhite);
  font-family:"Montserrat",sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

.landing{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(135deg, #090909 0%, #111 50%, #050505 100%);
}

.texture{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(255,255,255,.025) 4px),
    repeating-linear-gradient(0deg, transparent 0, transparent 4px, rgba(255,255,255,.018) 5px);
}

.topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:34px 5vw;
  border-bottom:1px solid var(--line);
}

.logo{
  display:inline-flex;
  flex-direction:column;
  line-height:1;
}

.logo-main{
  font-family:"Archivo Black",sans-serif;
  font-size:2.5rem;
  letter-spacing:.08em;
}

.logo-line{
  margin-top:7px;
  font-size:.58rem;
  letter-spacing:.28em;
  color:var(--grey);
  font-weight:600;
}

.instagram-link{
  text-transform:uppercase;
  font-size:.74rem;
  letter-spacing:.16em;
  border-bottom:1px solid var(--offwhite);
  padding-bottom:5px;
}

.hero{
  position:relative;
  z-index:2;
  flex:1;
  min-height:620px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  padding:70px 5vw;
  gap:5vw;
}

.hero-copy{
  max-width:760px;
}

.label{
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--grey);
  margin-bottom:24px;
  font-weight:600;
}

h1{
  font-family:"Archivo Black",sans-serif;
  font-size:clamp(5rem, 11vw, 11rem);
  line-height:.78;
  letter-spacing:-.055em;
  margin-bottom:34px;
}

.intro{
  max-width:590px;
  color:#c5c5c5;
  font-size:1.02rem;
  line-height:1.8;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:38px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.14em;
  font-weight:700;
  transition:.25s ease;
}

.button.primary{
  color:var(--black);
  background:var(--offwhite);
}

.button.secondary{
  border:1px solid var(--line);
  color:var(--offwhite);
}

.button:hover{
  transform:translateY(-2px);
}

.visual{
  position:relative;
  min-height:520px;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    #0c0c0c;
}

.frame{
  position:absolute;
  border:1px solid rgba(255,255,255,.16);
}

.frame-one{
  inset:42px;
}

.frame-two{
  inset:94px;
  border-color:rgba(255,255,255,.08);
}

.monogram{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:"Archivo Black",sans-serif;
  font-size:clamp(12rem, 24vw, 22rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.26);
}

.vertical-copy{
  position:absolute;
  right:18px;
  bottom:28px;
  writing-mode:vertical-rl;
  text-transform:uppercase;
  font-size:.59rem;
  letter-spacing:.28em;
  color:var(--grey);
}

.footer{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:26px 5vw 30px;
  border-top:1px solid var(--line);
}

.footer div{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.footer span:first-child{
  color:var(--grey);
}

.footer-social{
  text-align:right;
  align-items:flex-end;
}

.footer a{
  border-bottom:1px solid rgba(255,255,255,.35);
}

@media(max-width:900px){
  .hero{
    grid-template-columns:1fr;
    padding-top:55px;
  }

  .visual{
    min-height:360px;
  }

  .monogram{
    font-size:16rem;
  }
}

@media(max-width:640px){
  .topbar{
    padding:24px 6vw;
  }

  .logo-main{
    font-size:2rem;
  }

  .logo-line{
    font-size:.49rem;
  }

  .instagram-link{
    font-size:.62rem;
  }

  .hero{
    padding:55px 6vw;
    min-height:auto;
  }

  h1{
    font-size:clamp(4.4rem,23vw,7rem);
  }

  .actions{
    flex-direction:column;
  }

  .button{
    width:100%;
  }

  .visual{
    min-height:300px;
  }

  .frame-one{inset:25px}
  .frame-two{inset:60px}

  .monogram{
    font-size:12rem;
  }

  .footer{
    grid-template-columns:1fr;
    padding:24px 6vw 32px;
  }

  .footer-social{
    align-items:flex-start;
    text-align:left;
  }
}