/* ==========================================================================
   savjidholakia.in — Private access gate (index.html only)
   Deliberately minimal: no imagery, no navigation, no site content.
   ========================================================================== */
:root{
  --paper:#F6F2E9;
  --ink:#17150F;
  --muted:#5E5849;
  --muted-2:#7C7565;
  --rule:#CDC4AF;
  --clay:#A34527;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  min-height:100dvh;
}
main{width:100%;max-width:392px}

.gate__mark{
  width:34px;height:34px;border:1px solid var(--rule);
  display:grid;place-items:center;margin-bottom:38px;
}
.gate__mark span{width:5px;height:5px;border-radius:50%;background:var(--clay);display:block}

.gate__title{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0 0 18px;
}
.gate__hint{
  font-family:var(--serif);
  font-size:1.42rem;
  line-height:1.32;
  font-weight:300;
  letter-spacing:-.012em;
  margin:0 0 40px;
  color:var(--ink);
}

.gate__field{position:relative;margin-bottom:14px}
.gate__label{
  display:block;
  font-size:.62rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px;
}
.gate__input{
  width:100%;
  padding:14px 2px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.24rem;
  letter-spacing:.14em;
  border-radius:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease-out);
}
.gate__input::placeholder{color:#B6AE9B;letter-spacing:.2em;font-size:.9rem;font-family:var(--sans)}
.gate__input:focus{outline:none;border-bottom-color:var(--clay)}
.gate__input:focus-visible{outline:none}

.gate__submit{
  width:100%;
  margin-top:26px;
  padding:16px 20px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.68rem;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:color .38s var(--ease-out);
}
.gate__submit::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .44s var(--ease-out);
}
.gate__submit span{position:relative;z-index:1}
.gate__submit:hover{color:var(--paper)}
.gate__submit:hover::before{transform:translateY(0)}
.gate__submit:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.gate__submit[disabled]{opacity:.5;cursor:progress}

.gate__msg{
  min-height:22px;
  margin-top:18px;
  font-size:.76rem;
  letter-spacing:.055em;
  color:var(--muted);
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
.gate__msg.is-shown{opacity:1;transform:none}
.gate__msg.is-error{color:var(--clay)}

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

.gate__rule{height:1px;background:var(--rule);margin:44px 0 0;opacity:.6}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}
@media (max-width:420px){
  .gate__hint{font-size:1.24rem}
  .gate__mark{margin-bottom:30px}
}