/* ============================================================
   ACCESS PAGE — index.html
   No imagery. Ground, hairlines, typography and CSS texture only.
   ============================================================ */
:root{
  --g-graphite:#111317;
  --g-graphite-2:#171a1f;
  --g-ivory:#f4f1ea;
  --g-mineral:#8a8e93;
  --g-champagne:#a98d5f;
  --g-champagne-lo:#cbb492;
  --g-petrol:#233a46;
  --g-line:rgba(244,241,234,.15);
  --g-display:"Bodoni Moda","Didot","Times New Roman",Times,serif;
  --g-ui:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  --g-ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  background:var(--g-graphite);
  color:var(--g-ivory);
  font-family:var(--g-ui);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,6vw,60px) clamp(20px,6vw,48px);
  overflow-x:hidden;
  position:relative;
}

/* ---- CSS-only texture: hairline weave + soft light fields ---- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--g-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--g-line) 1px,transparent 1px);
  background-size:78px 78px,78px 78px;
  opacity:.34;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 46%,#000 8%,transparent 76%);
  mask-image:radial-gradient(72% 62% at 50% 46%,#000 8%,transparent 76%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(72% 54% at 50% 0%,rgba(169,141,95,.13),transparent 60%),
    radial-gradient(84% 62% at 50% 104%,rgba(35,58,70,.55),transparent 62%),
    radial-gradient(120% 90% at 50% 50%,transparent 42%,rgba(9,10,12,.72) 100%);
}

/* ---- Panel ---- */
.gate{
  position:relative;z-index:2;
  width:100%;max-width:452px;
  animation:gate-in 1.05s var(--g-ease) both;
}
@keyframes gate-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.gate__frame{
  position:relative;
  border:1px solid var(--g-line);
  background:linear-gradient(180deg,rgba(244,241,234,.045),rgba(244,241,234,.012));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  padding:clamp(30px,6vw,52px) clamp(24px,5.4vw,46px) clamp(28px,5vw,44px);
}
/* corner ticks */
.gate__frame::before,.gate__frame::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border-color:var(--g-champagne);opacity:.85;
}
.gate__frame::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.gate__frame::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* ---- Abstract mark (pure CSS, not a logo) ---- */
.gate__mark{
  width:34px;height:34px;margin:0 auto clamp(24px,4vw,34px);
  position:relative;display:block;
}
.gate__mark i{
  position:absolute;inset:0;border:1px solid var(--g-champagne);
  transform:rotate(45deg);opacity:.7;
}
.gate__mark i:last-child{
  inset:9px;transform:rotate(45deg);border-color:var(--g-ivory);opacity:.34;
  animation:mark-pulse 5.5s var(--g-ease) infinite;
}
@keyframes mark-pulse{0%,100%{opacity:.2;transform:rotate(45deg) scale(.9)}50%{opacity:.5;transform:rotate(45deg) scale(1)}}

/* ---- Type ---- */
.gate__eyebrow{
  margin:0 0 14px;text-align:center;
  font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--g-champagne-lo);font-weight:400;
}
.gate__title{
  margin:0 0 10px;text-align:center;font-family:var(--g-display);font-weight:400;
  font-size:clamp(1.65rem,5.4vw,2.15rem);line-height:1.16;letter-spacing:-.018em;color:var(--g-ivory);
}
.gate__sub{
  margin:0 0 clamp(26px,5vw,36px);text-align:center;
  font-size:12.5px;letter-spacing:.05em;line-height:1.75;color:var(--g-mineral);
}

.gate__hr{height:1px;border:0;margin:0 0 clamp(24px,4.4vw,32px);
  background:linear-gradient(90deg,transparent,var(--g-line) 22%,var(--g-champagne) 50%,var(--g-line) 78%,transparent);opacity:.8}

/* ---- Field ---- */
.gate__field{display:block;position:relative;margin:0 0 22px}
.gate__label{
  display:block;margin:0 0 11px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--g-mineral);
}
.gate__inputwrap{position:relative;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--g-line);transition:border-color .45s var(--g-ease)}
.gate__inputwrap:focus-within{border-bottom-color:var(--g-champagne)}
.gate__input{
  flex:1 1 auto;min-width:0;
  font-family:var(--g-ui);font-size:16px;letter-spacing:.24em;
  color:var(--g-ivory);background:transparent;border:0;outline:none;
  padding:13px 0;border-radius:0;-webkit-appearance:none;appearance:none;
}
.gate__input::placeholder{color:rgba(138,142,147,.8);letter-spacing:.2em}
.gate__peek{
  flex:none;background:none;border:0;cursor:pointer;color:var(--g-mineral);
  font-family:var(--g-ui);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 2px;min-height:44px;transition:color .4s var(--g-ease);
}
.gate__peek:hover,.gate__peek:focus-visible{color:var(--g-champagne-lo)}

/* ---- Button ---- */
.gate__btn{
  width:100%;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--g-ui);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--g-ivory);background:transparent;border:1px solid var(--g-line);
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .45s var(--g-ease),border-color .45s var(--g-ease);
}
.gate__btn span{position:relative;z-index:2}
.gate__btn::before{
  content:"";position:absolute;inset:0;background:var(--g-champagne);z-index:1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--g-ease);
}
.gate__btn:hover,.gate__btn:focus-visible{color:var(--g-graphite);border-color:var(--g-champagne)}
.gate__btn:hover::before,.gate__btn:focus-visible::before{transform:scaleY(1)}

/* ---- Feedback ---- */
.gate__msg{
  margin:16px 0 0;min-height:1.5em;text-align:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;
  color:var(--g-mineral);transition:color .3s var(--g-ease);
}
.gate__msg.is-error{color:#d9a08a}
.gate__msg.is-ok{color:var(--g-champagne-lo)}

.gate.is-wrong .gate__frame{animation:shake .5s var(--g-ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-7px)}
  38%{transform:translateX(6px)}
  58%{transform:translateX(-4px)}
  78%{transform:translateX(2px)}
}

.gate__foot{
  margin:clamp(22px,4vw,30px) 0 0;text-align:center;
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--g-mineral);line-height:1.9;
}

:focus-visible{outline:1px solid var(--g-champagne);outline-offset:3px}

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