:root {
  color: #171a13;
  background: #f5f2e8;
  font-family: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
main {
  position: relative;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  justify-content: center;
  text-align: center;
}
.content {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, 37rem);
  margin: clamp(5rem, 14vh, 9rem) auto 17rem;
}
h1 {
  margin: 0 0 1.8rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(3.8rem, 9vw, 7.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .95;
}
.intro {
  max-width: 28rem;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.3vw, 1.25rem);
  line-height: 1.5;
}
.subheading {
  margin: .55rem 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
}
form { width: min(100%, 25rem); margin: 3rem auto 0; text-align: left; }
label { display: block; margin-bottom: .7rem; font-size: .77rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.signup-row { display: flex; border-bottom: 1px solid #171a13; }
input, button { min-height: 3.2rem; border: 0; border-radius: 0; font: inherit; }
input { min-width: 0; flex: 1; padding: .5rem .5rem .5rem 0; background: transparent; color: inherit; font-size: 1rem; }
input::placeholder { color: #72776b; }
button { padding: .5rem 0 .5rem 1rem; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
button span { padding-left: .3rem; }
button:disabled { opacity: .5; cursor: wait; }
input:focus-visible, button:focus-visible { outline: 2px solid #5c7047; outline-offset: 3px; }
#message { min-height: 1.4rem; margin: .8rem 0 0; font-size: .875rem; }
.landscape { position: absolute; bottom: 0; left: 50%; display: block; width: 100%; min-width: 760px; height: auto; transform: translateX(-50%); pointer-events: none; }