:root{
  /* brand palette */
  --midnight:#1A2332;   /* primary base */
  --gold:#D4AF37;       /* brushed gold — accent */
  --sage:#4A5D4E;       /* soft sage — secondary */
  --amethyst:#6B4C7D;   /* highlight */
  /* derived */
  --sky-0:#0F1620;
  --sky-1:var(--midnight);
  --sky-2:#223042;
  --gold-hi:#EBD27A;
  --gold-lo:#9A7D22;
  --bone:#F1ECE0;
  --bone-2:#D9D2C2;
  --muted:#8F97A3;
  --line:rgba(212,175,55,.32);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:dark}
body{
  background:var(--sky-1);
  background-image:
    radial-gradient(70vw 50vh at 85% -10%, rgba(107,76,125,.22), transparent 70%),
    radial-gradient(60vw 40vh at 10% 10%, rgba(107,76,125,.12), transparent 70%),
    linear-gradient(180deg,var(--sky-0) 0%,var(--sky-1) 45%,var(--sky-2) 100%);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}

/* ── sky & earth ─────────────────────────────── */
#sky{
  position:fixed;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none;
}
.horizon{
  position:fixed;left:0;right:0;bottom:0;z-index:0;height:46vh;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(74,93,78,.55), transparent 62%),
    radial-gradient(90% 55% at 50% 112%, rgba(15,22,32,.9), transparent 70%),
    linear-gradient(180deg, transparent, rgba(15,22,32,.5));
}
.horizon::after{
  content:"";position:absolute;left:50%;bottom:clamp(2.6rem,6vh,4.2rem);
  width:min(560px,78vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line) 30%,rgba(235,210,122,.6) 50%,var(--line) 70%,transparent);
}

/* ── layout ──────────────────────────────────── */
.wrap{
  position:relative;z-index:1;flex:1;
  width:100%;max-width:720px;margin-inline:auto;
  padding:clamp(3rem,9vh,6rem) clamp(1.25rem,5vw,2.5rem) clamp(2rem,6vh,4rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(2rem,5vh,3.25rem);
}

/* ── brand ───────────────────────────────────── */
.mark{
  width:clamp(84px,14vw,112px);height:auto;display:block;margin:0 auto 1.4rem;
  color:var(--gold-hi);
  filter:drop-shadow(0 0 22px rgba(212,175,55,.3));
}
.eyebrow{
  margin:0 0 .6rem;
  font-size:clamp(.66rem,1.8vw,.74rem);letter-spacing:.38em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}
.wordmark{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,6.4vw,3.1rem);line-height:1.05;margin:0;letter-spacing:.1em;
  text-transform:uppercase;
  background:linear-gradient(96deg,var(--gold-lo),var(--gold-hi) 45%,var(--gold) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wordmark span{
  display:block;font-weight:300;letter-spacing:.3em;
  font-size:clamp(.95rem,3vw,1.35rem);margin-top:.35rem;
}

/* ── hero ────────────────────────────────────── */
.hero{display:flex;flex-direction:column;align-items:center;max-width:56ch}
.soon{
  margin:0;
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(2.6rem,9vw,4.6rem);line-height:1;letter-spacing:.01em;
  color:var(--bone);
}
.tagline{
  margin:1.1rem 0 0;
  font-size:clamp(.78rem,2.1vw,.9rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:400;text-wrap:balance;
}
@media (max-width:480px){.tagline{letter-spacing:.2em;font-size:.78rem}}
.copy{
  font-family:var(--serif);font-size:clamp(1.12rem,2.9vw,1.4rem);line-height:1.55;
  margin:1.6rem 0 0;max-width:40ch;color:var(--bone-2);text-wrap:pretty;
}

/* ── notify form ─────────────────────────────── */
.notify{margin-top:2.4rem;width:100%;max-width:460px}
.notify-label{
  display:block;margin-bottom:.9rem;
  font-size:clamp(.82rem,2.2vw,.92rem);letter-spacing:.04em;color:var(--bone-2);
}
.field{
  display:flex;gap:0;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(15,22,32,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .25s, box-shadow .25s;
}
.field:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.14),0 0 32px rgba(212,175,55,.14)}
.field input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  padding:.95rem 1.25rem;color:var(--bone);font:inherit;font-size:1rem;font-weight:400;
}
.field input::placeholder{color:var(--muted)}
.field button{
  border:0;margin:4px;border-radius:999px;cursor:pointer;
  padding:.72rem 1.3rem;font:inherit;font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky-0);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  transition:transform .15s, filter .2s;
  white-space:nowrap;
}
.field button:hover{filter:brightness(1.06)}
.field button:active{transform:scale(.98)}
.field button:disabled{opacity:.6;cursor:default}
.status{
  min-height:1.4em;margin:.8rem 0 0;
  font-size:.86rem;letter-spacing:.03em;color:var(--gold-hi);font-weight:400;
}
.status.err{color:#C9A0D6}

.notify.done .field{display:none}
.notify.done .notify-label{display:none}
.notify.done .status{
  font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.45rem);font-style:italic;letter-spacing:0;
}

@media (max-width:420px){
  .field{flex-direction:column;border-radius:18px;padding:4px}
  .field input{padding:.85rem 1rem;text-align:center}
  .field button{margin:0;width:100%;padding:.85rem}
}

/* ── footer ──────────────────────────────────── */
.foot{
  position:relative;z-index:1;
  padding:1.2rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
  display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.foot .dot{font-size:.4rem;color:var(--gold-lo)}
@media (max-width:480px){.foot{flex-direction:column;gap:.4rem}.foot .dot{display:none}}

/* ── entrance ────────────────────────────────── */
.brand,.hero{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero{animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .brand,.hero{animation:none}
  .field button,.field{transition:none}
}