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

body{
font-family:Inter,system-ui,sans-serif;
}

.hero{
height:100vh;
background-image:
linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.35)),
url("hero-beach.png");
background-size:cover;
background-position:center;
color:white;
display:flex;
flex-direction:column;
}

.site-header{
padding:32px 42px;
}

.logo{
height:42px;
width:auto;
}

.hero-content{
margin-top:auto;
padding:120px 42px 80px 42px;
max-width:620px;
}

.eyebrow{
letter-spacing:.35em;
font-size:.75rem;
opacity:.75;
margin-bottom:20px;
text-transform:uppercase;
}

h1{
font-family:Garamond,serif;
font-size:64px;
line-height:1;
margin-bottom:20px;
}

.sub{
opacity:.8;
font-size:18px;
}