*{box-sizing:border-box}
:root{
  --bg:#050505;
  --panel:#0b0b0d;
  --gold:#dfc374;
  --txt:#f4f0e7;
  --mut:rgba(255,255,255,.56);
  --line:rgba(215,186,103,.20);
}
html,body{
  margin:0;
  min-height:100%;
  background:#050505;
  color:var(--txt);
  font-family:Montserrat,-apple-system,sans-serif;
}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 12%,rgba(177,139,48,.10),transparent 27%),
    #050505;
}
.topbar{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.back{
  position:absolute;
  left:22px;
  width:46px;height:46px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold);
  text-decoration:none;
  font-size:20px;
}
.brand{
  font:600 32px/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.22em;
  color:var(--gold);
}
.shell{
  width:min(650px,calc(100% - 34px));
  margin:auto;
  padding:62px 0 80px;
}
.kicker{
  color:var(--gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.42em;
  margin-bottom:18px;
}
h1{
  margin:0;
  font:500 clamp(58px,12vw,88px)/.91 "Cormorant Garamond",Georgia,serif;
  letter-spacing:-.025em;
}
h1 em{font-weight:500;color:var(--gold)}
.intro{
  max-width:550px;
  margin:25px 0 42px;
  color:var(--mut);
  font-size:16px;
  line-height:1.65;
}
.section{
  margin:0 0 34px;
}
.section-title{
  margin:0 0 12px 4px;
  color:rgba(215,186,103,.70);
  font-size:9px;
  font-weight:700;
  letter-spacing:.30em;
}
.field{position:relative;margin-bottom:12px}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
input,select{
  width:100%;
  height:62px;
  margin:0;
  padding:0 19px;
  border:1px solid var(--line);
  border-radius:21px;
  background:var(--panel);
  color:#fff;
  font:500 16px/1 Montserrat,-apple-system,sans-serif;
  outline:0;
}
input::placeholder{color:rgba(255,255,255,.48)}
input:focus,select:focus{
  border-color:rgba(215,186,103,.52);
  box-shadow:0 0 0 3px rgba(215,186,103,.05);
}
select{
  appearance:auto;
  color:rgba(255,255,255,.78);
}
.password-field input{padding-right:80px}
.password-toggle{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:none;
  color:var(--gold);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
  padding:7px;
}
.message{
  min-height:22px;
  margin:6px 3px 0;
  color:var(--gold);
  font-size:13px;
  line-height:1.45;
}
.message.error{color:#e59a9a}
.submit{
  width:100%;
  height:62px;
  margin-top:8px;
  border:1px solid rgba(215,186,103,.42);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(215,186,103,.09),rgba(215,186,103,.025));
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.27em;
}
.submit:disabled{opacity:.45}
.legal{
  margin:18px auto 0;
  max-width:520px;
  text-align:center;
  color:rgba(255,255,255,.34);
  font-size:11px;
  line-height:1.6;
}
.legal a{color:rgba(215,186,103,.68);text-decoration:none}
.existing{
  margin-top:28px;
  text-align:center;
  color:rgba(255,255,255,.42);
  font-size:13px;
}
.existing a{
  margin-left:6px;
  color:var(--gold);
  text-decoration:none;
}
@media(max-width:520px){
  .topbar{height:76px}
  .back{left:16px;width:44px;height:44px}
  .brand{font-size:30px}
  .shell{padding-top:52px}
  h1{font-size:64px}
  .grid{gap:10px}
  input,select{height:60px}
}
