/* =========================================================================
   Access gate — minimal stylesheet (index.html only)
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
button,input{ font:inherit; -webkit-appearance:none; appearance:none; border-radius:0; }
:root{
  --paper:#F4F2ED;
  --deep:#0B211F;
  --deep-2:#123330;
  --rule:#2F544F;
  --muted:#9FB3AE;
  --accent:#E7A470;
  --accent-solid:#B4531F;
  --ff-display:"Bodoni Moda","Didot","Times New Roman",Georgia,serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
html,body{ height:100%; }
body{
  margin:0;
  background:var(--deep);
  color:var(--paper);
  font-family:var(--ff-mono);
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  min-height:100svh;
}
.gate{
  width:100%; max-width:430px;
}
.gate-mark{
  font-family:var(--ff-display);
  font-size:1.05rem; font-weight:700; letter-spacing:.05em;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--rule); color:var(--paper);
  margin-bottom:40px;
}
.gate-title{
  font-family:var(--ff-display);
  font-size:clamp(1.9rem,7vw,2.7rem);
  font-weight:500; line-height:1.1; letter-spacing:-0.015em;
  margin:0 0 14px;
}
.gate-sub{
  font-size:0.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 40px; line-height:1.8;
}
.gate-field{ display:block; margin-bottom:14px; }
.gate-label{
  display:block;
  font-size:0.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.gate-input{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  color:var(--paper);
  font-family:var(--ff-mono);
  font-size:1.06rem; letter-spacing:.24em;
  padding:14px 2px; min-height:52px;
  transition:border-color .3s ease;
}
.gate-input:hover{ border-bottom-color:var(--muted); }
.gate-input:focus{ outline:none; border-bottom-color:var(--accent); }
.gate-input::placeholder{ color:#4E6B67; letter-spacing:.3em; }

.gate-btn{
  width:100%; margin-top:28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:transparent; color:var(--paper);
  border:1px solid var(--rule);
  font-family:var(--ff-mono);
  font-size:0.7rem; letter-spacing:.22em; text-transform:uppercase;
  padding:18px 22px; min-height:56px; cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.gate-btn:hover{ background:var(--paper); color:var(--deep); border-color:var(--paper); }
.gate-btn .arw{ transition:transform .3s ease; }
.gate-btn:hover .arw{ transform:translateX(5px); }

.gate-msg{
  margin-top:22px; min-height:22px;
  font-size:0.68rem; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.8; color:var(--muted);
}
.gate-msg[data-state="error"]{ color:var(--accent); }
.gate-msg[data-state="ok"]{ color:#8FCBB8; }

.gate.is-wrong{ animation:nudge .34s ease; }
@keyframes nudge{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-7px); }
  75%{ transform:translateX(7px); }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}
@media (max-width:400px){
  .gate-title{ font-size:1.8rem; }
  .gate-btn{ padding:16px 18px; }
}