*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Georgia,serif;
  background:#050608;
  color:#fff;
  overflow:hidden;
}
.landing{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.landing-bg{
  position:absolute;
  inset:0;
  background-image:url('assets/matti-boustedt-hero-original.jpg');
  background-size:cover;
  background-position:center 22%;
  filter:grayscale(35%) contrast(1.08) saturate(1.05);
}
.landing-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.35) 45%, rgba(5,6,8,.75) 100%);
}
.landing-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
  text-align:center;
  padding:0 24px;
}
.landing-name{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  letter-spacing:.32em;
  font-size:clamp(20px,3vw,28px);
  text-transform:uppercase;
  color:#f6f7f8;
}
.landing-name span{color:#8fb3d1}
.landing-enter{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  border:1px solid #8fb3d1;
  padding:18px 46px;
  display:inline-block;
  transition:background .25s ease, color .25s ease, letter-spacing .25s ease;
}
.landing-enter:hover{
  background:#8fb3d1;
  color:#050608;
  letter-spacing:.28em;
}
.landing-foot{
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  z-index:2;
  text-align:center;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}