/* Access gate — passcode only. No imagery of any kind. */
:root{
  --paper:#F3EEE5;
  --ink:#1D1922;
  --muted:#645F6B;
  --vermilion:#AF3720;
  --rule:rgba(29,25,34,.2);
  --rule-2:rgba(29,25,34,.42);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 47px,rgba(29,25,34,.045) 47px 48px);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:350;
  display:grid;place-items:center;
  padding:32px 20px;
  -webkit-font-smoothing:antialiased;
}
.gate{
  width:100%;max-width:430px;
  background:var(--paper);
  border:1px solid var(--rule-2);
  padding:clamp(30px,6vw,52px) clamp(24px,5vw,46px) clamp(28px,5vw,44px);
  position:relative;
}
.gate::before,.gate::after{
  content:"";position:absolute;width:11px;height:11px;border:1px solid var(--vermilion);
}
.gate::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.gate::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.gate__label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px;
}
.gate__field{margin-bottom:20px;}
.gate__field > label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin-bottom:11px;
}
.gate__input{
  width:100%;display:block;
  font-family:var(--mono);font-size:16px;letter-spacing:.32em;
  padding:14px 2px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule-2);border-radius:0;
  transition:border-color .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.gate__input::placeholder{color:rgba(29,25,34,.26);letter-spacing:.3em;}
.gate__input:focus{outline:0;border-bottom-color:var(--vermilion);}
.gate__input:focus-visible{outline:2px solid var(--vermilion);outline-offset:4px;}
.gate__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:15px 18px;cursor:pointer;border-radius:0;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.gate__btn:hover{background:var(--vermilion);border-color:var(--vermilion);}
.gate__btn:focus-visible{outline:2px solid var(--vermilion);outline-offset:3px;}
.gate__msg{
  margin:16px 0 0;min-height:1.3em;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vermilion);
}
.gate__msg:empty{margin-top:0;}
.gate__rule{height:1px;background:var(--rule);margin:26px 0 0;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}