/* ==========================================================================
   Access gate — minimal, elegant, self-contained.
   No branding, no imagery, no navigation, no footer.
   ========================================================================== */

:root{
  --g-ink:      #0B1614;
  --g-teal-900: #072F2B;
  --g-teal-800: #0C4A43;
  --g-teal-700: #12645A;
  --g-brass:    #B8863B;
  --g-brass-lt: #D6A855;
  --g-bone:     #F5F1E7;
  --g-bone-2:   #FBF9F3;
  --g-clay:     #E08A6E;
  --g-ease:     cubic-bezier(.22,.61,.36,1);
  --g-sans:     "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --g-serif:    "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

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

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--g-sans);
  color:rgba(245,241,231,.8);
  background:
    radial-gradient(105% 78% at 50% -6%, rgba(27,129,117,.24) 0%, transparent 60%),
    radial-gradient(78% 62% at 50% 108%, rgba(184,134,59,.16) 0%, transparent 60%),
    linear-gradient(168deg, var(--g-teal-900) 0%, #06231F 52%, var(--g-ink) 100%);
  background-attachment:fixed;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background-image:linear-gradient(rgba(237,220,187,.045) 1px, transparent 1px);
  background-size:100% 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
  mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
}

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

.gate-card{
  background:rgba(251,249,243,.045);
  border:1px solid rgba(237,220,187,.16);
  border-radius:18px;
  padding:clamp(2rem, 1.2rem + 3.4vw, 3.25rem) clamp(1.4rem, .8rem + 3vw, 2.75rem);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}

.gate-seal{
  width:52px; height:52px; margin:0 auto 1.6rem;
  border-radius:50%;
  border:1px solid rgba(214,168,85,.42);
  display:grid; place-items:center;
  color:var(--g-brass-lt);
}
.gate-seal svg{ width:21px; height:21px; }

.gate-title{
  font-family:var(--g-serif); font-weight:500;
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
  line-height:1.2; letter-spacing:-.02em;
  color:#FBF9F3; margin:0 0 .6rem; text-align:center;
}
.gate-sub{
  font-size:.865rem; line-height:1.65; text-align:center;
  color:rgba(245,241,231,.76); margin:0 0 2rem;
}

.gate-field{ display:block; margin-bottom:1rem; }
.gate-label{
  display:block; font-size:.685rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:rgba(237,220,187,.82); margin-bottom:.6rem;
}

.gate-input-wrap{ position:relative; }
.gate-input{
  width:100%; min-height:54px;
  font-family:var(--g-sans); font-size:1rem; font-weight:500;
  letter-spacing:.16em;
  color:#FBF9F3;
  background:rgba(7,47,43,.42);
  border:1px solid rgba(237,220,187,.2);
  border-radius:6px;
  padding:.9rem 3.25rem .9rem 1.05rem;
  transition:border-color .25s var(--g-ease), box-shadow .25s var(--g-ease), background .25s var(--g-ease);
}
.gate-input::placeholder{ color:rgba(245,241,231,.28); letter-spacing:.22em; }
.gate-input:focus{
  outline:none;
  border-color:rgba(214,168,85,.68);
  background:rgba(7,47,43,.6);
  box-shadow:0 0 0 3px rgba(184,134,59,.2);
}
.gate-form.is-error .gate-input{
  border-color:rgba(224,138,110,.7);
  box-shadow:0 0 0 3px rgba(224,138,110,.16);
}

.gate-reveal{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:0; border-radius:5px;
  background:transparent; color:rgba(245,241,231,.5);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:color .2s var(--g-ease), background .2s var(--g-ease);
}
.gate-reveal:hover{ color:var(--g-brass-lt); background:rgba(237,220,187,.07); }
.gate-reveal svg{ width:18px; height:18px; }
.gate-reveal .eye-off{ display:none; }
.gate-reveal[aria-pressed="true"] .eye-on{ display:none; }
.gate-reveal[aria-pressed="true"] .eye-off{ display:block; }

.gate-msg{
  min-height:1.35rem; margin:0 0 1.1rem;
  font-size:.815rem; line-height:1.5;
  color:var(--g-clay); opacity:0;
  transition:opacity .22s var(--g-ease);
}
.gate-msg.show{ opacity:1; }

.gate-btn{
  width:100%; min-height:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--g-sans); font-size:.815rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#20160A; background:var(--g-brass);
  border:1.5px solid var(--g-brass); border-radius:6px;
  cursor:pointer; padding:.9rem 1.4rem; line-height:1.2;
  transition:background .25s var(--g-ease), border-color .25s var(--g-ease), transform .25s var(--g-ease), box-shadow .25s var(--g-ease);
}
.gate-btn:hover{
  background:var(--g-brass-lt); border-color:var(--g-brass-lt);
  transform:translateY(-2px); box-shadow:0 16px 32px -16px rgba(184,134,59,.7);
}
.gate-btn:active{ transform:translateY(0); }
.gate-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.gate-hint{
  margin:1.5rem 0 0; text-align:center;
  font-size:.745rem; line-height:1.65; color:rgba(245,241,231,.62);
}

:focus-visible{ outline:2.5px solid var(--g-brass-lt); outline-offset:3px; border-radius:4px; }

.gate-form.shake{ animation:gate-shake .42s var(--g-ease); }
@keyframes gate-shake{
  0%,100%{ transform:translateX(0); }
  18%{ transform:translateX(-8px); }
  38%{ transform:translateX(7px); }
  58%{ transform:translateX(-5px); }
  78%{ transform:translateX(3px); }
}

.gate{ animation:gate-in .7s var(--g-ease) both; }
@keyframes gate-in{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

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

@media (max-width:400px){
  body{ padding:1rem; }
  .gate-input{ letter-spacing:.1em; padding-right:3rem; }
}