:root{
  --navy:#061722;
  --cream:#f6efe5;
  --gold:#d3a15d;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:var(--navy);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
body{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:start center;
}
.page{
  width:100%;
  display:flex;
  justify-content:center;
}
.artwork-wrap{
  position:relative;
  width:min(100vw,1244px);
  line-height:0;
  background:#061722;
}
.artwork{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.est{
  position:absolute;
  top:28.7%;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  color:rgba(246,239,229,.9);
  font-size:clamp(7px,1.05vw,13px);
  font-weight:600;
  letter-spacing:.46em;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.38);
  white-space:nowrap;
}
/*
The approved artwork already contains the visual form.
These live controls sit precisely over that artwork so it remains visually identical.
*/
.signup-form{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}
.email-input{
  position:absolute;
  left:19.6%;
  top:49.05%;
  width:37.6%;
  height:5.55%;
  padding:0 2.4%;
  border:0;
  outline:0;
  color:#fff;
  background:transparent;
  font-size:clamp(10px,1.55vw,20px);
  letter-spacing:.15em;
  line-height:1;
  pointer-events:auto;
}
/* When the visitor starts typing, cover the baked-in placeholder beneath it. */
.email-input:focus,
.email-input:not(:placeholder-shown){
  background:rgba(5,20,31,.94);
}
.email-input:focus{
  box-shadow:inset 0 0 0 2px rgba(211,161,93,.95);
}
.join-button{
  position:absolute;
  left:57.2%;
  top:49.05%;
  width:20.75%;
  height:5.55%;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}
.join-button:hover,
.join-button:focus-visible{
  background:rgba(211,161,93,.08);
  outline:2px solid rgba(211,161,93,.9);
  outline-offset:-2px;
}
.join-button:disabled{cursor:default}
.consent-box{
  position:absolute;
  left:27.55%;
  top:56.05%;
  width:1.55%;
  height:1.55%;
  margin:0;
  opacity:0;
  pointer-events:auto;
}
.consent-hitbox{
  position:absolute;
  left:26.8%;
  top:55.45%;
  width:46%;
  height:4.25%;
  cursor:pointer;
  pointer-events:auto;
}
/* Show a real check over the baked empty checkbox after consent. */
.consent-box:checked + .consent-hitbox::before{
  content:"✓";
  position:absolute;
  left:1.25%;
  top:2%;
  width:3.3%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  color:#061722;
  background:#f6efe5;
  font-size:clamp(8px,1.3vw,16px);
  font-weight:900;
  line-height:1;
}
.form-message{
  position:absolute;
  left:24%;
  top:60.2%;
  width:52%;
  min-height:2.6%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.35em .8em;
  color:#f6efe5;
  background:rgba(4,17,26,.78);
  border-radius:999px;
  font-size:clamp(8px,1vw,13px);
  letter-spacing:.05em;
  line-height:1.25;
  text-align:center;
  opacity:0;
  transition:opacity .2s ease;
}
.form-message.show{opacity:1}
.form-message.error{color:#ffd2d2}
.honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.instagram-link{
  position:absolute;
  left:38.2%;
  top:90.0%;
  width:25.7%;
  height:5.3%;
  z-index:8;
  border-radius:999px;
}
.instagram-link:hover,
.instagram-link:focus-visible{
  outline:2px solid rgba(255,48,64,.92);
  outline-offset:2px;
  background:rgba(255,48,64,.05);
}
.privacy-link{
  position:absolute;
  right:2.2%;
  bottom:1.25%;
  z-index:9;
  color:rgba(255,255,255,.55);
  font-size:clamp(7px,.7vw,10px);
  line-height:1;
  letter-spacing:.12em;
  text-decoration:none;
}
.privacy-link:hover,
.privacy-link:focus-visible{color:#fff;text-decoration:underline}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  body{background:#061722}
  .artwork-wrap{
    height:100svh;
    width:auto;
    aspect-ratio:1244/1264;
  }
  .artwork{height:100%;width:100%;object-fit:contain}
}