/* Access gate — minimal, no branding, no imagery. */
*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:#08202E;
  background-image:radial-gradient(120% 90% at 50% 0%,#12455E 0%,transparent 62%);
  color:#F6F1E9;
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.gate{
  width:100%;
  max-width:380px;
  animation:gate-in .8s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes gate-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gate-mark{
  width:34px;height:34px;
  margin:0 auto 30px;
  border:1px solid rgba(200,138,84,.85);
  transform:rotate(45deg);
}
.gate-mark i{
  display:block;
  width:100%;height:100%;
  border:1px solid rgba(246,241,233,.14);
  transform:scale(.42);
  background:rgba(200,138,84,.6);
}

.gate h1{
  margin:0 0 26px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(246,241,233,.55);
}

.gate form{display:block}

.gate .row{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid rgba(246,241,233,.28);
  transition:border-color .3s cubic-bezier(.22,.61,.36,1);
}
.gate .row:focus-within{border-bottom-color:#C88A54}

.gate input{
  flex:1 1 auto;
  min-width:0;
  font:inherit;
  font-size:1.02rem;
  letter-spacing:.22em;
  padding:14px 0;
  border:0;
  background:transparent;
  color:#F6F1E9;
  border-radius:0;
}
.gate input:focus{outline:none}
.gate input::placeholder{color:rgba(246,241,233,.3);letter-spacing:.16em}

.gate button{
  flex:0 0 auto;
  font:inherit;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:0 4px 0 20px;
  border:0;
  background:none;
  color:#C88A54;
  cursor:pointer;
  transition:color .3s cubic-bezier(.22,.61,.36,1);
}
.gate button:hover{color:#F6F1E9}
.gate button:focus-visible,
.gate input:focus-visible{outline:2px solid #C88A54;outline-offset:3px}

.gate .msg{
  margin-top:14px;
  min-height:1.3em;
  font-size:.78rem;
  letter-spacing:.02em;
  color:#E38A7A;
  opacity:0;
  transition:opacity .3s cubic-bezier(.22,.61,.36,1);
}
.gate .msg.show{opacity:1}

.gate.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}

@media (prefers-reduced-motion:reduce){
  .gate,.gate.shake{animation:none}
  *{transition-duration:.001ms !important}
}