/* ==========================================================================
   ALOK JALAN — PRIVATE ACCESS GATE
   Self-contained. Used only by index.html.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

:root{
  --paper:#F7F4EF;
  --ink:#131A17;
  --ink-2:#2B3833;
  --mineral:#59655E;
  --clay:#A94E32;
  --line:#D9D1C4;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex; align-items:center; justify-content:center;
  min-height:100svh; min-height:100vh;
  padding:1.5rem;
  overflow-x:hidden;
}

/* Quiet ruled field — echoes the site's ledger grid without any imagery */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:min(25vw,220px) 100%;
  opacity:.5;
}

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

.gate{
  position:relative; z-index:1;
  width:100%; max-width:29rem;
}

.gate__mark{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 clamp(2rem,6vh,3.25rem);
}
.gate__dot{ width:9px; height:9px; background:var(--clay); flex:none; }
.gate__wordmark{
  font-family:var(--display); font-weight:700; font-size:1.05rem; line-height:1;
  letter-spacing:.09em; text-transform:uppercase; margin:0;
  font-variation-settings:"opsz" 20;
}

.gate__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.15rem,8.5vw,3.1rem); line-height:1.02; letter-spacing:-.028em;
  margin:0 0 1rem;
  font-variation-settings:"opsz" 48;
}
.gate__sub{
  margin:0 0 clamp(1.75rem,5vh,2.5rem);
  font-size:.985rem; color:var(--ink-2);
  padding-bottom:clamp(1.75rem,5vh,2.5rem);
  border-bottom:1px solid var(--line);
}

.gate__field{ display:block; margin:0 0 1.15rem; }
.gate__label{
  display:block; margin:0 0 .65rem;
  font-size:.685rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mineral);
}
.gate__input{
  display:block; width:100%;
  min-height:56px; padding:.9rem 1rem;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:0;
  font-family:var(--sans); font-size:1rem; letter-spacing:.18em;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.gate__input::placeholder{ color:#B3AEA3; letter-spacing:.18em; }
.gate__input:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(169,78,50,.14); }
.gate__input:focus-visible{ outline:none; }
.gate.is-error .gate__input{ border-color:var(--clay); }

.gate__submit{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; min-height:56px; padding:1rem 1.5rem;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:0; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  transition:background .24s var(--ease), border-color .24s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.gate__submit::after{ content:"\2192"; font-size:1rem; line-height:1; }
.gate__submit:hover,.gate__submit:focus-visible{ background:var(--clay); border-color:var(--clay); color:#fff; }

.gate__msg{
  display:block; min-height:1.5rem; margin:1rem 0 0;
  font-size:.815rem; letter-spacing:.02em; color:var(--clay);
}
.gate__msg:empty{ min-height:1.5rem; }

.gate.is-error{ animation:gate-nudge .4s var(--ease); }
@keyframes gate-nudge{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

@media (max-width:480px){
  body{ padding:1.15rem; align-items:flex-start; padding-top:12vh; }
  body::before{ background-size:33vw 100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .gate.is-error{ animation:none; }
}