*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:#0a0a0c;
color:#f4f1ea;
font-family:Georgia,'Times New Roman',serif;
font-size:1.05rem;
line-height:1.55;
max-width:760px;
margin:0 auto;
padding:0 1.5rem;
min-height:100vh;
}
h1,h2,nav{
font-family:Impact,'Arial Narrow Bold','Arial Black',sans-serif;
text-transform:uppercase;
letter-spacing:.04em;
}
a{color:#f4f1ea}
nav{
display:flex;
justify-content:space-between;
align-items:baseline;
padding:1rem 0;
}
nav .site{font-size:1.4rem}
nav a{text-decoration:none;font-size:1rem}
nav a:hover{text-decoration:underline}
img{
display:block;
width:100%;
height:auto;
}
.hero{
padding:1.5rem 0 1rem;
}
.hero h1{
font-size:clamp(3.5rem,12vw,7rem);
line-height:.92;
letter-spacing:-.01em;
}
.hero p{
font-size:1.1rem;
margin-top:.6rem;
font-style:italic;
}
section{padding:1.1rem 0}
section h2{
font-size:clamp(1.4rem,4vw,1.9rem);
margin-bottom:.75rem;
background:#fed12c;
color:#0a0a0c;
display:inline;
padding:0 .25rem;
}
section p{max-width:60ch}
#join{padding:1.1rem 0}
#join h2{background:#d8231c;color:#0a0a0c;padding:0 .25rem}
#join p{margin:.75rem 0 1.25rem;max-width:60ch}
form {display: flex;gap: .5rem;}
input[type=email]{
flex:1;
min-width: 66%;
padding:.7rem .9rem;
border:3px solid #f4f1ea;
background:#0a0a0c;
color:#f4f1ea;
font-family:Georgia,serif;
font-size:1rem;
}
input:focus {
  border-color: #fed12c;
  outline: #fed12c;
}
button{
flex: 0 0 auto;
padding:.7rem 1.4rem;
background:#f4f1ea;
color:#0a0a0c;
border:3px solid #f4f1ea;
font-family:Impact,'Arial Narrow Bold','Arial Black',sans-serif;
text-transform:uppercase;
font-size:1rem;
letter-spacing:.05em;
cursor:pointer;
}
button:hover{
  background:#fed12c;
  border:3px solid #fed12c;
  color:#0a0a0c;
}
footer{
padding:1rem 0;
font-size:.8rem;
border-top:4px solid #f4f1ea;
}
@media (max-width: 600px) {
  body {
    padding:0 0.5rem;
  }
  form {
    flex-direction: column;
  }
  button {
    width: 100%;
  }
}