:root{
  --ink-900:#0A1F28;
  --ink-deep:#040B0E;
  --coral:#FF7A59;
  --coral-dim:#9C5640;
  --gold:#E8B23E;
  --shell:#F4ECD8;
  --seafoam:#8FB9B2;
  --seafoam-dim:#3F5C57;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--ink-deep);
  color:var(--shell);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.scene{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 10%, rgba(143,185,178,0.16), transparent 60%),
    linear-gradient(to bottom, var(--ink-900) 0%, #071319 55%, var(--ink-deep) 100%);
  display:flex;
  flex-direction:column;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:2rem 2.5rem 0;
  position:relative;
  z-index:5;
}

.wordmark{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.18em;
  color:var(--shell);
}

.nav-meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--seafoam);
  text-align:right;
  line-height:1.5;
}

main.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1.5rem 14rem;
  position:relative;
  z-index:5;
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--coral);
  margin:0 0 1.5rem;
}

h1.headline{
  font-family:'Fraunces',serif;
  font-weight:340;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0 0 1.6rem;
  max-width:18ch;
  color:var(--shell);
}

h1.headline em{
  font-style:italic;
  font-weight:400;
  color:var(--coral);
}

.subhead{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--seafoam);
  max-width:34ch;
  margin:0 0 2.5rem;
  font-weight:400;
}

form.notify{
  display:flex;
  gap:0.6rem;
  width:100%;
  max-width:360px;
  flex-wrap:wrap;
  justify-content:center;
}

.field-row{
  display:flex;
  gap:0.6rem;
  width:100%;
}

input[type="email"]{
  flex:1;
  min-width:0;
  background:rgba(244,236,216,0.06);
  border:1px solid rgba(244,236,216,0.25);
  border-radius:3px;
  padding:0.8rem 1rem;
  font-family:'Manrope',sans-serif;
  font-size:0.92rem;
  color:var(--shell);
}

input[type="email"]::placeholder{
  color:rgba(244,236,216,0.4);
}

input[type="email"]:focus-visible{
  outline:none;
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(255,122,89,0.25);
}

button.submit{
  background:var(--coral);
  color:var(--ink-deep);
  border:none;
  border-radius:3px;
  padding:0.8rem 1.4rem;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:0.9rem;
  cursor:pointer;
  white-space:nowrap;
  transition:transform 0.15s ease, background 0.15s ease;
}

button.submit:hover{
  background:#ff8d6f;
}

button.submit:active{
  transform:scale(0.97);
}

button.submit:focus-visible{
  outline:2px solid var(--shell);
  outline-offset:2px;
}

.form-note{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  color:var(--seafoam-dim);
  margin-top:0.9rem;
  letter-spacing:0.02em;
}

.confirmed{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--coral);
  max-width:30ch;
}

.coral-wrap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  line-height:0;
  z-index:2;
  pointer-events:none;
}

.coral-wrap svg{
  display:block;
  width:100%;
  height:auto;
}

.meta-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:1.4rem;
  display:flex;
  justify-content:space-between;
  padding:0 2.2rem;
  z-index:6;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.03em;
  color:var(--seafoam);
  pointer-events:none;
}

.meta-footer a{
  color:var(--seafoam);
  text-decoration:none;
  pointer-events:auto;
  border-bottom:1px solid transparent;
}

.meta-footer a:hover{
  border-bottom-color:var(--seafoam);
}

.meta-footer a:focus-visible{
  outline:1px solid var(--coral);
  outline-offset:2px;
}

@media (prefers-reduced-motion: no-preference){
  .sway-a{ animation: sway 7s ease-in-out infinite; transform-origin:bottom center; }
  .sway-b{ animation: sway 9s ease-in-out infinite; transform-origin:bottom center; animation-delay:-2s; }
  .sway-c{ animation: sway 6.2s ease-in-out infinite; transform-origin:bottom center; animation-delay:-4s; }

  .fish-outer-1{ animation: swim 24s linear infinite; }
  .fish-outer-2{ animation: swim 31s linear infinite; animation-delay:-9s; }
  .fish-outer-3{ animation: swim 19s linear infinite; animation-delay:-4s; }

  .fish-bob{ animation: bob 2.4s ease-in-out infinite; }
}

@keyframes sway{
  0%,100%{ transform:rotate(-1.4deg); }
  50%{ transform:rotate(1.4deg); }
}

@keyframes swim{
  0%{ transform:translateX(-12%); }
  100%{ transform:translateX(112%); }
}

@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

@media (max-width:640px){
  .nav{ padding:1.5rem 1.3rem 0; }
  .nav-meta{ font-size:0.62rem; }
  main.hero{ padding:2.5rem 1.2rem 11rem; }
  .field-row{ flex-direction:column; }
  button.submit{ width:100%; }
  .meta-footer{ flex-direction:column; gap:0.4rem; align-items:flex-start; bottom:1rem; padding:0 1.3rem; }
}